我正在编码一个包含多个页面的网站。一个页面ComponentA,具有一个子组件,该子组件返回带有标题和段落的部分。
ComponentA传递数据中的数组作为对子项的支持。在孩子内部,一个map函数返回正确的段落。现在缺少的标题,你会怎么做传递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"]
};
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)