如何将 props 从 parent 组件渲染到 child？

Question

我正在尝试遍历数组并将标题和描述发送到 child 组件。但是，child 组件无法识别我在 parent 组件中分配给它的道具。

News.js:

const AllNews = [
{
    title: 'Reverse The Online Gambling Ban',
    description: 'The MPA comes with three different sizes of foam and silicone tips and a carrying pouch.'
},
{
    title: 'Successful Myspace Profile',
    description: 'All users on MySpace will know that there are millions of people out there.'
},
{
    title: 'Home Audio Recording For Everyone',
    description: 'The number of friends and acquaintances will grow in a large number. This is what you should be looking for.'
},
{
    title: 'Buying Used Electronic Test Equipment',
    description: 'People after all will make friends after reading about you. If you have an ugly profile, there is no way they will want to date you.'
}
]

export default function News() {
const classes = useStyles();

const listNews = AllNews.forEach(news => {
    <Singlenews title={news.title} description={news.description}/>
})

return (
    <div>
        {listNews}
    </div>
)

}

Singlenews.js:

export default function Singlenews(props) {
const classes = useStyles();
const {title, description} = props

return (
<div className={classes.group4}>
  <div className={classes.bitmap}/>
    <div className={classes.flexCol}>
      <div className={classes.reverseTheOnlineG}>
      {title}
      </div>
      <div className={classes.group4}>
        <p className={classes.theMpaComesWithT}>
         {description}
       </p>
      <div className={classes.oval}/>
    </div>
  </div>
</div>
)

}

Answer 1

试试这个 const listNews = AllNews.map(news => <Singlenews title={news.title} description={news.description}/>);

而不是const listNews = AllNews.forEach(news => { <Singlenews title={news.title} description={news.description}/> })

Answer 2

这部分在这里：

const listNews = AllNews.forEach(news => {
    <Singlenews title={news.title} description={news.description}/>
})

您正在遍历 AllNews 中的每个项目并使用 forEach 函数创建 Singlenews 组件。这绝对是正确的想法，问题是 forEach 函数 returns undefined (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)。所以在这种情况下 listNews 实际上等于 undefined。

我的建议是查看 JavaScript (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 中的 map 函数。此函数将回调映射到数组的每个元素，并且 return 是一个新数组，其中包含来自回调的 return 值。所以在这种情况下，您可以将 <SingleNews> 组件映射到 AllNews 中的每个元素，就像您已经拥有它一样向下传递道具：

const listNews = AllNews.map(news => {
    return <Singlenews title={news.title} description={news.description}/>
})

这样，listNews 就是一个包含 <Singlenews> 个项目的数组，就像您想要的那样，道具设置正确。不是道具的问题，是循环的问题！

如何将 props 从 parent 组件渲染到 child？

How to render props from parent component to child?

javascript

arrays

components

ejs

reactjs