如何在 React-native 中循环和渲染元素？

Question

是否可以在 Render 函数中循环相同的组件？

像这样的东西：

 ...

onPress = () => {
 ...
};

initialArr = [["blue","text1"],["red","text2"]];
buttonsListArr = [];

for (let i = 0; i < initialArr.length; i++)
{
 buttonsListArr.push(
   <Button style={{borderColor:{initialArr[i][0]}}} onPress={this.onPress.bind(this)}>{initialArr[i][1]}</Button>
 );
}

...

render() {
  return (
    <View style={...}>
     {buttonsListArr}
    </View>
)};

我的意思是这只是有限的组件列表，因此 ListView/ScrollView 等任何组件都不适用于这种特殊情况。这只是语法问题。

原文由 Stich 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你通常会使用地图来做那种事情。

 buttonsListArr = initialArr.map(buttonInfo => (
  <Button ... key={buttonInfo[0]}>{buttonInfo[1]}</Button>
);

（每当你在 React 中进行映射时，key 都是必要的道具。key 需要是生成组件的唯一标识符）

另一方面，我会使用对象而不是数组。我发现它看起来更好：

 initialArr = [
  {
    id: 1,
    color: "blue",
    text: "text1"
  },
  {
    id: 2,
    color: "red",
    text: "text2"
  },
];

buttonsListArr = initialArr.map(buttonInfo => (
  <Button ... key={buttonInfo.id}>{buttonInfo.text}</Button>
);

原文由 nbkhope 发布，翻译遵循 CC BY-SA 3.0 许可协议