javascript - 在 React 中嵌套组件， Prop 不传递给子组件

Question

我正在使用 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>
  )
}

子组件中的控制台日志显示没有任何 Prop

Answer 1

我认为如果将props 直接传递给children 组件会更好。试试这个:

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>
  )
}

在你的子组件中，你可以显示你想要的