如何循环和渲染反应的元素

Question

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

类似的东西：

...
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>
)};

我的意思是，这只是组件的有限列表，因此在这种特定情况下，任何组件都不适用。这只是语法问题。

Answer 1

您通常会为这种东西使用地图。

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

（每当您在React中进行映射时，键是必要的支撑。

作为一个侧面，我将使用对象而不是数组。我发现它看起来更好：

initialArr = [
  {
    id: 1,
    color: "blue",
    text: "text1"
  },
  {
    id: 2,
    color: "red",
    text: "text2"
  },
];
buttonsListArr = initialArr.map(buttonInfo => (
  <Button ... key={buttonInfo.id}>{buttonInfo.text}</Button>
);

Answer 2

render() {
  return (
    <View style={...}>
       {initialArr.map((prop, key) => {
         return (
           <Button style={{borderColor: prop[0]}}  key={key}>{prop[1]}</Button>
         );
      })}
     </View>
  )
}

应该做技巧

Answer 3

对于初始数组，更好地使用对象而不是数组，因为您不会担心索引，并且更清楚什么是什么：

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

对于实际映射，请使用JS数组映射而不是循环 - 用于循环，在没有实际数组的情况下使用循环，例如显示某些次数：

onPress = () => {
    ...
};
renderButtons() {
    return initialArr.map((item) => {
        return (
            <Button 
                style={{ borderColor: item.color }}
                onPress={this.onPress}
            >
                {item.text}
            </Button>
        );
    });
}
...
render() {
    return (
        <View style={...}>
            {
                this.renderButtons()
            }
        </View>
    )
}

我将映射移至渲染方法之外的单独函数，以获取更可读的代码。还有许多其他方法可以循环通过React Native中的元素列表，您使用哪种方式取决于您需要做什么。这些方式中的大多数涵盖了React JSX循环，尽管它使用了React示例，但所有内容都可以在React Antial中使用。如果您对此主题感兴趣，请检查一下！

另外，不是在循环的主题上，而是由于您已经使用了数组语法来定义OnPress函数，因此无需再次绑定它。仅当箭头语法自动绑定函数时，仅当函数使用该函数定义时才适用。

Answer 4

如果您想要直接/快速脱离，而无需变量：

{
 urArray.map((prop, key) => {
     console.log(emp);
     return <Picker.Item label={emp.Name} value={emp.id} />;
 })
}