如何在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等任何组件都不适用于这种特殊情况.这只是语法问题.

Answer 1

你通常会使用map来做这种事情.

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

(无论何时在React中进行映射,key都是必需的prop.密钥需要是生成组件的唯一标识符)

作为一方,我会使用一个对象而不是一个数组.我发现它看起来更好:

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 Array映射而不是for循环-在未定义实际数组的情况下（例如，显示某些次数），应使用for循环：

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

我将映射移到render方法之外的单独函数中，以使代码更具可读性。还有许多其他方法可以在react native中循环浏览元素列表，您将使用哪种方法取决于您需要执行的操作。关于React JSX循环的文章中涵盖了大多数方法，尽管它使用的是React示例，但其中的所有内容都可以在React Native中使用。如果您对此主题感兴趣，请检查一下！

同样，不是关于循环的主题，而是因为您已经在使用数组语法定义onPress函数，所以无需再次绑定它。同样，这仅适用于在组件中使用此语法定义功能的情况，因为箭头语法会自动绑定功能。