在 React 中嵌套组件，道具不传递给子组件答案

【问题标题】：Nesting components in React, props not passing to child component在 React 中嵌套组件，道具不传递给子组件
【发布时间】：2016-08-17 13:14:36
【问题描述】：

我正在使用 React 组件创建一个列表，并且正在处理列表容器和可重用的列表项组件。最父组件将信息传递给中间组件，但最子组件没有props 值。

我做错了什么？没有控制台错误。
中间组件：

const VideoList = (props) => {
  const videoItems = props.videos.map((video) => {
    return (
      // want to render list-item component
      <li key={video.etag}>{video.snippet.title}</li>
    )
  });
  return (
    <ul className="list-group">
    {videoItems}
      <ListItem
        videos={ videoItems }
      />
    </ul>
  )
}

子组件中的控制台登录没有显示任何道具

【问题讨论】：

我对你的代码有点困惑。你的意思是同时渲染videoItems 和一个名为<ListItem/> 的元素，它以videoItems 作为道具？还有，你说的最孩子是什么元素？

标签： javascript reactjs components

【解决方案1】：

我认为将props 直接传递给子组件会更好。试试这个：

const VideoList = (props) => {
  const videoItems = props.videos.map((video) => {
    return (
      // want to render list-item component
      <ListItem key={video.etag} video={video} />
    )
  });
  return (
    <ul className="list-group">
      {videoItems}
    </ul>
  )
}

在您的子组件中，您可以显示您想要的内容

【讨论】：

【解决方案2】：

尝试使用“this”关键字将该属性传递给最子组件。

    <ListItem videos={this.videoItems}/>

【讨论】：

这是不正确的，VideoList 是一个无状态功能组件，因此没有 this。
哦！好的，谢谢！
谢谢！这很有帮助