我有一堆看起來像這樣的組件：
<View>
<Component
containerStyle={{ color: 'blue' }}
id={"test1"}
onPress={onPress1}/>
<Component
containerStyle={{ color: 'blue' }}
id={"test2"}
onPress={onPress2}/>
<Component
containerStyle={{ color: 'blue' }}
id={"test3"}
onPress={onPress3}/>
...
</View>
如何在代碼中干凈地創建它而不手動列出這些組件的長串列？
uj5u.com熱心網友回復：
請檢查：（https://reactjs.org/docs/lists-and-keys.html）。您可以使用map陣列的方法：
...
const elementsProps = [
{
containerStyle: {color: 'blue'},
id: 'test1',
onPress: onPress1
},
{
containerStyle: {color: 'blue'},
id: 'test2',
onPress: onPress2
},
{
containerStyle: {color: 'blue'},
id: 'test3',
onPress: onPress3
},
];
return (
<View>
{elementsProps.map((element) => (<Component key={element.id} {...element} />)}
</View>
);
您必須傳遞附加屬性：key，這是優化串列所必需的。如果元素改變了它們的順序，key屬性有助于在 DOM 中移動元素，而不是從頭開始重新渲染它們。這就是為什么不建議將其index用作鍵的原因，因為當 order 改變時它會隨著元素而改變。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486048.html