[英]Nesting components in React, props not passing to child component
I'm creating a list with React components, and am working on the list container and reusable list-item components. 我正在用React组件创建一个列表,并且正在处理列表容器和可重用的列表项组件。 The parent most component passes information to middle component, but the child-most component does not have
props
values. 父级最高的组件将信息传递给中间组件,但子级最高的组件没有
props
值。
What am I doing wrong? 我究竟做错了什么? No console errors.
没有控制台错误。
middle component: 中间部分:
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>
)
}
a console log in child-most component shows no props 最子组件中的控制台日志未显示任何道具
I think it will be better if you pass props
directly into the children component. 我认为将
props
直接传递到子组件中会更好。 Try this: 尝试这个:
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>
)
}
Inside your children component, you can display what you want 在子组件中,您可以显示所需内容
尝试使用“ this”关键字将属性传递给最子组件。
<ListItem videos={this.videoItems}/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.