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

Posted 2023-02-23

【中文标题】在 React 中的哑组件内部映射/循环

【英文标题】：Mapping / Looping inside dumb component in 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>