小编nox*_*sta的帖子

React-将数组映射到子组件

我正在编码一个包含多个页面的网站。一个页面ComponentA,具有一个子组件,该子组件返回带有标题和段落的部分。

ComponentA传递数据中的数组作为对子项的支持。在孩子内部,一个map函数返回正确的段落。现在缺少的标题,你会怎么做传递title1paragraph1title2paragraph2等?

组分A:

import Child from "../components/child";

const ComponentA = () => {
  <Layout>
    <h1>Home Page</h1>
    <Child title={info.title} text={info.text} />
  </Layout>
}

const info = {
  title: ["Title1", "Title2"],
  text: ["Paragraph1", "Paragraph2"]
};
Run Code Online (Sandbox Code Playgroud)

子组件:

const Child = ({ text, title }) => {
  return (
    <div>
      {text.map(text => {
        return (
          <div>
            <h3>{title}</h3>
            <p>{text}</p>
          </div>
        );
      })}
    </div>
  );
};
Run Code Online (Sandbox Code Playgroud)

javascript arrays reactjs

8
推荐指数
2
解决办法
1672
查看次数

标签 统计

arrays ×1

javascript ×1

reactjs ×1