在 React 中传递对象数组中的嵌套对象的正确方法是什么？

Question

在下面的地图函数中，我试图访问数据中的嵌套对象。我想说“如果我的 SlideData 中的对象有属性“列表”，则显示它”。我正在将 props 从数据传递到我的 TextSlide 组件，但是一定有比将大量 props 传递到 TextComponent 更好的方法吗？

function Slideshow(props) {

//MY DATA
const SlideData = [{
{
    title: "The Title",
    text1: "Monkey",
    text2: "D",
    text3: "Luffy",
    list: [
            {
              listTitle: "The List",
              listItem1: "Zoro",
              listItem2: "Nami",
              listItem3: "Sanji",
              listItem4: "Ussop",
              listItem5: "Chopper",
              listItem6: "Franky",
            },
          ],
    imagesrc: picture,
    imagewidth: "100px",
  },
}]

//MAP THROUGH DATA (is there a better way to pass multiple props here?? maybe with {...props} ?)

const textSlides = SlideData.map((item),index) => ( <TextSlide
      key={index}
      title={item.title}
      text1={item.text1}
      text2={item.text2}
      listTitle={item.listTitle}
      listItem1={item.listItem1}
      listItem2={item.listItem2}
      listItem3={item.listItem3}
      listItem4={item.listItem4}
      listItem5={item.listItem5}
      listItem6={item.listItem6}
  />));

return (
    <>
        {textSlides}
    </>
  );
}

//文本幻灯片组件//

const TextSlide = (props) => {
  return (
    <>
      <div className="slide">
        <div className="standard-grid">
          <span className="slide-title title">{props.title}</span>
             <div className="content">
               <p>{props.text1}</p>      
               <p>{props.text2}</p>         
               <p>{props.text3}</p>       
               {props.list ? <div>
                <h4>{props.list2}</h4>
                <ul>
                  <li>{props.listItem1}</li>
                  <li>{props.listItem2}</li>
                  <li>{props.listItem3}</li>
                  <li>{props.listItem4}</li>
                  <li>{props.listItem5}</li>
                  <li>{props.listItem6}</li>
                </ul>
              </div> : null} 
             </div>
            {props.imagesrc ? (<img className="picture" src={props.imagesrc} 
            style={{ maxWidth: props.imagewidth }} alt="image" />) : null}
        </div>
      </div>
    </>
  );
};

export default TextSlide;

Answer 1

你应该更喜欢使用 <TextSlide {...props} /> 而不是传递许多 props，它更具可读性。

    SlideData.map((slide) => (
    <TextSlide key={slide.id} {...slide} />
  ))

快速提示：不要使用索引作为键，您可以阅读更多相关信息here。

我还建议您对代码进行一些重构：

将您的 listData 存储在相关对象而不是数组中

 {
  id: 1,
  title: "The Title",
  text1: "Monkey",
  text2: "D",
  text3: "Luffy",
  listData: {
    listTitle: "The List",
    listItem1: "Zoro",
    listItem2: "Nami",
    listItem3: "Sanji",
    listItem4: "Ussop",
    listItem5: "Chopper",
    listItem6: "Franky"
  },
  imagesrc: "picture",
  imagewidth: "100px"
}

进行此更改后，您可以更轻松地处理数据，让我们看看您的示例并进行一些更改：

TextSlide 组件

  const TextSlide = (props) => {
  return (
    <>
      <div className="slide">
        <div className="standard-grid">
          <span className="slide-title title">{props.title}</span>
          <div className="content">
            <p>{props.text1}</p>
            <p>{props.text2}</p>
            <p>{props.text3}</p>
            {props.listData ? (
              <div>
                <h4>{listData.list2}</h4>
                <ul>
                  <li>{listData.listItem1}</li>
                  <li>{listData.listItem2}</li>
                  <li>{listData.listItem3}</li>
                  <li>{listData.listItem4}</li>
                  <li>{listData.listItem5}</li>
                  <li>{listData.listItem6}</li>
                </ul>
              </div>
            ) : null}
          </div>
          {props.imagesrc ? (
            <img
              className="picture"
              src={props.imagesrc}
              style={{ maxWidth: props.imagewidth }}
              alt="image"
            />
          ) : null}
        </div>
      </div>
    </>
  );
};

export default TextSlide;

Answer 2

由于您似乎对数据结构和格式有一定的控制权，我建议尝试以易于呈现的方式格式化您的数据。在 React 中，列表通常 converted/stored 在数组中，以便它们可以映射到 JSX。

示例：

const SlideData = [
  {
    title: "The Title",
    text: ["Monkey", "D","Luffy", ...];
    list: {
      title: "The List",
      items: [ "Zoro", "Nami", "Sanji", "Ussop", "Chopper", "Franky"],
    },
    image: {
      src: picture,
      width: "100px",
    },
  },
  ...
];

您之前基本上使用重复的“itemX”键的任何地方都是存储为数组的主要候选对象。

您可以简单地将整个 object 属性作为 prop 传递，然后渲染并传递任何嵌套属性。

示例：

const textSlides = SlideData.map((item, index) => (
  <TextSlide
    key={index}
    {...item}
  />
));

Child

const TextSlide = ({
  title,
  text = [],
  list,
  image,
}) => {
  return (
    <div className="slide">
      <div className="standard-grid">
        <span className="slide-title title">{title}</span>
        <div className="content">
          {text.map((t, i) => <p key={i}>{t}</p>)}
          {list && (
            <div>
              <h4>{list.title}</h4>
              <ul>
                {list.items.map((item, i) => (
                  <li key={i}>{item}</li>
                ))}
              </ul>
            </div>
          )}
        </div>
        {image && (
          <img
            className="picture"
            src={image.src} 
            style={{ maxWidth: image.width }}
            alt="image"
          />
        )}
      </div>
    </div>
  );
};

在 React 中传递对象数组中的嵌套对象的正确方法是什么？

What is the right way to pass nested objects in object array in React?

arrays

reactjs

object

react-props

array.prototype.map