在React中的哑组件内部映射/循环

Question

我创建了一个笨拙的组件，它使用了很多数据，但是显示却相同。

问题是，仅接受本机数据类型或对象数组会更好吗？因为我的数据属性在每个表中都不同。

<ScrollView>
  {listOfData.map(()=>(
    <Dumb title={data.title} description={data.description} >
  ))}
</ScrollView>

优点：不依赖对象属性

缺点：智能组件中的Need Loop使其变得混乱 与

<ScrollView>
    <Dumbs data={listOfData} >
</ScrollView>

优点：智能组件更简单

缺点：哑组件仅接受特定的数据属性

那么哪一个更好？我确实使用了第二个对象，并先将其映射到我的component.ts中，以更改对象属性，但它会使component.ts混乱

Answer 1

我认为最好的方法是：

<ScrollView>
    {listOfData.map((data) => (
        <Dumb key={data.id} {...data} />
    ))}
</ScrollView>

** data.id对于每个项目都必须是唯一的。

Answer 2

我更喜欢第一种方法，因为如果您的listOfData对于其他data-source具有不同的结构，那么它会使组件更易于重用，那么您需要检查并提取 title 和描述用于不同的数据结构。

<ScrollView>
    {listOfData.map((data) => (
        <Dumb key={data.id} description={data.desc} title={data.title} />
    ))}
</ScrollView>