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

【问题标题】：Mapping / Looping inside dumb component in React在 React 中的哑组件内部映射/循环
【发布时间】：2018-12-10 07:01:57
【问题描述】：

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

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

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

优点：没有对象属性依赖

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

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

优点：智能组件更简单

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

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

【问题讨论】：

【解决方案1】：

我认为最好的方法是：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：