Блог

Я пытаюсь создать компоненты карты и отобразить их через свой файл данных, чтобы отобразить их, что мне удалось сделать с одним файлом данных объекта массива. Но моя проблема возникает, если я хочу повторно использовать компонент card с новым файлом данных массива, я, похоже, не могу получить данные.

Итак, пример данных

  export const data1 = [
  {
   title: 'first',
   desc: 'first desc,
   img: 'image-1.jpg'
  },
  {
   title: 'second',
   desc: 'second desc,
   img: 'image-2.jpg'
  },
 ]
  

Итак, если у меня есть только один массив данных, я просто сопоставляю его следующим образом

  {data1.map((data, index) => {
  return (
 <Title>{data.title}</Title>
 <Desc>{data.desc}</Desc>
 <Img src={data.img} />
 )
 })
  

Тогда, если я хочу отобразить этот компонент карты, я бы просто добавил его на свою страницу

  <CardComponent />
  

Но теперь, если я хочу повторно использовать этот компонент и просто переключить данные, я не смогу правильно отобразить его, потому что он отображается только через массив data1.

Итак, если я создам еще один массив

  export const dataTwo = [
  {
   title: 'third',
   desc: 'third desc,
   img: 'image-3.jpg'
  },
  {
   title: 'fourth',
   desc: 'fourth desc,
   img: 'image-4.jpg'
  },
 ]
  

Теперь я не могу повторно использовать свой компонент, потому что map() нацелен только на data1.map, а не на dataTwo.map

Так что я не совсем уверен, как бы я создал по существу новый компонент Card

В идеале я бы хотел получить этот результат

  <Navbar />
 <CardComponent {...data1} />
 <MainSection>
 <CardComponent {...dataTwo} />
 <Footer />
  

Но проблема в том, что я отображаю значения вместо того, чтобы просто получать данные из обычного объекта, поэтому этот метод не работает.

Есть идеи, как я мог бы это реализовать?

Просто передайте массивы в качестве реквизита CardComponent , например, data реквизиту.

 <CardComponent data={data1} />
...
<CardComponent data={dataTwo} />
  

И сопоставьте переданный data реквизит CardComponent . Помните, что сопоставление должно возвращать все, заключенное в один узел (т. Е. div , Fragment , и т. Д.), И Должно иметь прикрепленный ключ реакции.

Пример

 const CardComponent = ({ data }) => {
  return (
    <>
      {data.map((data, index) => {
        return (
          <Fragment key={index}>
            <Title>{data.title}</Title>
            <Desc>{data.desc}</Desc>
            <Img src={data.img} />
          </Fragment>
        );
     })}
    </>
  );
};
  

Если у вас есть несколько массивов, которые вы хотите отобразить, вы можете объединить их в один при вызове компонента, например:

 <CardComponent data={data1.concat(dataTwo)} />
  

 props.data.map((item) => (
    <Title>{item.title}</Title>
    <Desc>{item.desc}</Desc>
    <Img src={item.img} />
))