如何在 React Native 中连接 JSX 组件答案

【问题标题】：How to concatenate JSX components in React Native如何在 React Native 中连接 JSX 组件
【发布时间】：2015-07-10 07:33:41
【问题描述】：

例如，我想显示一个名称列表。所以我想做这样的事情：

var returnValue;
for (eachName of _names) {
  returnValue += (
  <TouchableHighlight
    onPress={() => this._onPressButton}>
      <Text>
      {eachName}
      </Text>
  </TouchableHighlight>);
}
return returnValue;

但是，这是无效的。这让我想到了我的问题：如何在 React Native 中连接动态数量的 JSX 组件。

【问题讨论】：

标签： react-native react-jsx

【解决方案1】：

数字我一问 stackoverflow 就知道了。代码需要放入数组中：

var returnValue = [];
for (var i = 0; i < _names.length; i++) {

  returnValue.push(
  <TouchableHighlight onPress={() => this._onPressButton}>
      <Text>
      {_names[i]}
      </Text>
  </TouchableHighlight>);
}
return returnValue;

【讨论】：

太棒了，谢谢。我相信您可能会接受您的答案，这显然是人们在回答这个问题时正在寻找的答案。
干得好。我永远不会认为将元素数组作为可能的解决方案。
大家好，我收到错误消息：必须返回有效的 React 元素（或 null）。您可能返回了未定义、数组或其他一些无效对象。 :(
我使用returnValue += ... 连接，但这不起作用（屏幕输出会显示类似 [object]...）。通过使用returnValue.push( ... 修复此答案。

【解决方案2】：

也许是更优雅的方式：

return <View>
{_names.map((eachName) => {
  return (
    <TouchableHighlight onPress={() => this._onPressButton}>
      <Text>
      {eachName}
      </Text>
    </TouchableHighlight>
  );
})}
</View>

【讨论】：

虽然我同意这种方法很常见，但它并不能解决所有问题（否则我不会在这里寻找替代方案）

【解决方案3】：

let returnValue = _names.map(eachName =>
 <TouchableHighlight
    onPress={() => this._onPressButton}>
      <Text>
      {eachName}
      </Text>
  </TouchableHighlight>);
return returnValue;

【讨论】：