时间戳

首页 > 解决方案 > 在 React 中的哑组件内部映射/循环

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

问题描述

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

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

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

优点：没有对象属性依赖

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

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

优点：智能组件更简单

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

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

标签： reactjsreact-nativecomponentsreusabilityreact-component

解决方案

我认为最好的方法是：

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

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

推荐阅读