我正在编码一个包含多个页面的网站。页面ComponentA
包含一个子组件,该子组件返回带有标题和段落的部分。
ComponentA
中的数组将数据作为道具传递给子级。在孩子内部,一个map函数返回正确的段落。标题缺少什么?如何将title1
传递给paragraph1
,将title2
传递给paragraph2
,等等?
ComponentA:
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>
);
};
答案 0 :(得分:4)
您的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"/>
答案 1 :(得分:1)
您可以这样更改子组件,因为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>
);
};
答案 2 :(得分:1)
您可以遍历文本并使用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"/>