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

Question

我创建了一个被这么多数据使用但显示相同的哑组件。

问题是，只接受本机数据类型或对象数组是更好的哑组件吗？因为我的数据属性是每个表的差异。

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

优点：没有对象属性依赖

缺点：智能组件中需要循环，这使它变得混乱

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

优点：智能组件更简单

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

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

score 1 · Accepted Answer

我认为最好的方法是：

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

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

score 1 · Accepted Answer

我更喜欢第一种方法，因为它使组件更具可重用性，以防万一你listOfData有不同的结构，data-source那么你需要检查并提取不同数据结构的标题和描述。

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

2 回答 2