如何在React Native中用for循环结合JSX渲染集合内容到多个<Text>标签

刚接触JSX的时候，确实容易在循环和组件渲染的结合上摸不着头脑，我来帮你把这个方法补全，还会给你介绍React生态里更常用的写法～

方法1：完善你的for循环写法 #

你已经有了rows数组的雏形，只需要遍历传入的keys数组，把每个对应的Text组件push进去，最后用View包裹返回就行。注意一定要给每个列表元素加唯一的key属性，这是React要求的，用来优化列表渲染性能：

collectionToView(collection, keys) {
  let rows = [];
  // 遍历keys数组，逐个生成Text组件
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i];
    rows.push(
      <Text key={key}>{collection[key]}</Text>
    );
  }
  return <View>{rows}</View>;
}

方法2：更简洁的map写法 #

在React开发中，我们更常用数组的map方法来生成列表组件，它能让代码更简洁，符合函数式编程的风格，而且可以直接嵌入到JSX表达式中：

collectionToView(collection, keys) {
  return (
    <View>
      {/* 用map遍历keys数组，返回对应Text组件 */}
      {keys.map(key => (
        <Text key={key}>{collection[key]}</Text>
      ))}
    </View>
  );
}

额外的注意事项 #

• key属性必须唯一：这里我们用keys数组里的每个key值作为组件的key，只要你的keys数组里的值是唯一的，就没问题。
• 处理不存在的key：如果collection里可能没有某个key对应的 value，可以加个判断避免渲染undefined：

  {keys.map(key => (
    // 只有当collection[key]存在时才渲染Text
    collection[key] && <Text key={key}>{collection[key]}</Text>
  ))}
  

  或者用可选链操作符（需要环境支持ES2020+）：

  {keys.map(key => (
    <Text key={key}>{collection?.[key] || ''}</Text>
  ))}
  

使用示例 #

在你的render方法里调用这个方法就行：

render() {
  // 示例数据
  const myCollection = {
    key1: '第一个文本内容',
    key2: '第二个文本内容',
    key3: '第三个文本内容'
  };
  const targetKeys = ['key1', 'key2', 'key3'];

  return (
    <View style={{ flex: 1, padding: 20, justifyContent: 'center' }}>
      {this.collectionToView(myCollection, targetKeys)}
    </View>
  );
}

内容的提问来源于stack exchange，提问作者Ray Jonathan