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

是否有可能在渲染函数中循环相同的组件？如何在React-native中循环和渲染元素？

事情是这样的：

... 

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 /滚动型等任何组件并不适用于这种特殊情况下。这只是语法问题。

来源

2017-02-28 Stich

为什么不用地图代替？'''const button = buttonsListArr.map（item =>

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

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

（键是一个必要的道具每当你在阵营，关键需要是对所产生的组件的唯一标识符做映射）

作为一个方面，我会用一个对象，而不是数组。我觉得它看起来更好：

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

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

来源

2017-02-28 23:05:26 nbkhope

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

应该做的伎俩

来源

2017-03-01 01:36:47 Damathryx

看起来不错，但我会在返回之前的映射移到语句使事情看起来更好，只需在View中使用映射的数组变量名即可，作为说明，映射函数的第二个参数是数组中元素的索引，尽管它们可能是一个不同的整数每次他们可能不一定是关键属性的好候选者将会改变，因此密钥也必须改变（如果您使用了唯一的标识符，则即使索引已更改，密钥也会保持不变）。 – nbkhope

根据React文档，“如果项目可以重新排序，我们不推荐使用索引，因为这样会很慢。” - https://facebook.github.io/react/docs/lists-and- keys.html（Keys部分，底部） – nbkhope

@nbkhope这是关于密钥的新信息。谢谢！ – Damathryx

对于初始阵列，更好的使用对象，而不是数组，那么你就不会担心指标，这将是更清楚什么是什么：

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

对于实际映射，使用JS阵图，而不是为循环 - for循环应的情况下使用时，有没有实际的数组定义，如显示的东西一定NUM时间：

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

另外，不是关于循环的主题，但是因为您已经使用数组语法来定义onPress函数，所以不需要再次绑定它。这也适用于只有在组件内使用此语法定义函数的情况，因为箭头语法会自动绑定该函数。

来源

2018-02-14 14:58:06

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

回答

相关问题