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

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

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 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方法之外的单独函数，以获得更易读的代码。还有很多其他方法可以循环使用本机中的元素列表，以及您使用哪种方式取决于您需要做什么。 this article about React JSX loops涵盖了大多数这些方法，尽管它使用了React示例，但它的所有内容都可以在React Native中使用。如果您对此主题感兴趣，请查看它！

此外，不是关于循环的主题，但是由于您已经使用数组语法来定义onPress函数，因此无需再次绑定它。只有在组件中使用此语法定义函数时，这同样适用，因为箭头语法会自动绑定函数。

Answer 4

如果您想直接/快速离开而无需使用变量：

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

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

4 个答案: