Question

将对象数组作为 React 组件的 props 传递下去

2022-02-10

5436

javascript arrays reactjs object react-props

我想将对象数组传递给子组件。每个子组件都应返回 dummyData 相应索引的值。

父组件

export default function MainContent() {
  const dummyData = [
    {
      id: "1",
      cardIMG: "test.png",
      cardTitle: "Title",
      cardText: "Text"
    },
    {
      id: "2",
      cardIMG: "test1.png",
      cardTitle: "Title",
      cardText: "Text"
    }
  ];

  return (
    <div className="MainContainer">
      <Card props={dummyData} />
      <Card props={dummyData} />
    </div>
  );
}

子组件

export default function Card(props) {
  return (
    <div className="CardContainer">
      <div className="CardIMG">
        <img src={this.props.CardIMG} alt="" />
      </div>

      <div className="TextContent">
        <h2>{this.props.CardTitle}</h2>
        <p className="TextBlock">{this.props.CardText}</p>
        <button className="ReadMore">Read more</button>
      </div>
    </div>
  );
}

Answer 1

由于您尝试迭代数组，因此必须循环遍历所有项目。您可以使用 for 、 map 或 each ，完全由您决定。

参考循环： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration

您基本上可以在父组件中执行此操作：

export default function MainContent() {
  const dummyData = [
    {
      id: "1",
      cardIMG: "test.png",
      cardTitle: "Title",
      cardText: "Text"
    },
    {
      id: "2",
      cardIMG: "test1.png",
      cardTitle: "Title",
      cardText: "Text"
    }
  ];

  return (
    <div className="MainContainer">
      {dummyData.map((data) => {
        <Card key={data.id} cardInfo={data} />
      })
    </div>
  );
}

在您的子组件（它是一个功能组件，因此您不能在其中使用 this ）中，您可以执行

export default function Card(props) {
  return (
    <div className="CardContainer">
      <div className="CardIMG">
        <img src={props.cardInfo.cardIMG} alt="" />
      </div>

      <div className="TextContent">
        <h2>{props.cardInfo.CardTitle}</h2>
        <p className="TextBlock">{props.cardInfo.CardText}</p>
        <button className="ReadMore">Read more</button>
      </div>
    </div>
  );
}