Mapping / Looping внутри тупого компонента в React

Question

Я создаю немой компонент, который использует столько данных, но тот же дисплей.

Проблема в том, лучше ли тупому компоненту принимать только собственный тип данных или массив объектов? так как мое свойство данных - это разница для каждой таблицы.

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

плюсы: нет зависимости от свойств объекта

минусов: нужен умный компонент, который делает его беспорядочным против

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

плюсы: более простой в умном компоненте

минусы: тупой компонент принимает только определенные свойства данных

Так какой из них лучше? Я использую второй и сопоставляю его в моем component.ts сначала для изменения свойств объекта, но это делает component.ts грязным

Answer 1

Я предпочитаю первый метод, поскольку он делает компонент более пригодным для повторного использования в случае, если ваш listOfData имеет другую структуру для некоторого другого data-source, тогда вам нужно будет проверить и извлечь title и описание для различной структуры данных.

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

Answer 2

Я думаю, что самый хороший способ будет:

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

** data.id должен быть уникальным для каждого элемента.