React - 将数组映射到子组件

Posted 2023-02-22

【中文标题】React - 将数组映射到子组件

【英文标题】：React - map array to child component

【发布时间】：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>
  );
;

【参考方案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"/>