React - 将数组映射到子组件答案

【问题标题】：React - map array to child componentReact - 将数组映射到子组件
【发布时间】：2019-08-14 17:13:18
【问题描述】：

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

ComponentA 中的数组将数据作为道具传递给孩子。在孩子内部，地图函数返回正确的段落。标题缺少什么，如何将title1 传递给paragraph1、title2 传递给paragraph2 等等？

组件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"]
};

子组件：

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

【问题讨论】：

标签： javascript arrays reactjs

【解决方案1】：

您的info 对象不是可迭代列表 - 所以我会将它们转换为{title, text} 列表，如下所示：

const data = info.title.map((e,i) => {
  return {title : e, text: info.text[i]}
})

现在我会将map() 函数转换为ComponentA 而不是Child，因为这会使子组件更有意义。

请看下面的演示：

const info = {
  title: ["Title1", "Title2"],
  text: ["Paragraph1", "Paragraph2"]
};

const data = info.title.map((e,i) => {
  return {title : e, text: info.text[i]}
})

const ComponentA = () => {
  return (
    <div>
      <h1>Home Page</h1>
      { data.map(item => {
          return (
            <Child key={item.title} title={item.title} text={item.text} />
          );
        })
      }
    </div>
  )
}

const Child = ({ text, title }) => {
  return (
    <div>
      <h3>{title}</h3>
      <p>{text}</p>
    </div>
  );
};

ReactDOM.render(
  <ComponentA/>, 
  document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

【讨论】：

【解决方案2】：

您可以像这样更改您的子组件，因为text 是一个数组，因此您需要通过索引访问它的值。

const Child = ({ text, title }) => {
  return (
    <div>
      {text.map((text,index) => {
        return (
          <div>
            <h3>{title[index]}</h3>
            <p>{text}</p>
          </div>
        );
      })}
    </div>
  );
};

你甚至可以把你的父组件改成这样的

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

const ComponentA = () => {
  <Layout>
    <h1>Home Page</h1>
    {info.text.map((text,index)=> <Child title={info.title[index]} text={text} />}
  </Layout>
}

const info = {
  title: ["Title1", "Title2"],
  text: ["Paragraph1", "Paragraph2"]
};

然后你的孩子应该是

const Child = ({ text, title }) => {
  return (
    <div>
          <h3>{title}</h3>
          <p>{text}</p>
    </div>
  );
};

【讨论】：

【解决方案3】：

您可以遍历文本并使用 usnig 索引访问标题

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

const info = {
  title: ["Title1", "Title2"],
  text: ["Paragraph1", "Paragraph2"]
};

const Child = ({ text, title }) => {
  return (
    <div>
      {text.map((text1, index) => {
        return (
          <div>
            <h3>{title[index]}</h3>
            <p>{text1}</p>
          </div>
        );
      })}
    </div>
  );
};

ReactDOM.render(<ComponentA />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"/>

【讨论】：