React 组件组合与数据传递:props
每当创建新的子组件之后,都需要在根组件中的 render()
函数中 return
相应的组件树:
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
与 React.render()
实例化跟组件一样, <CommentList />
实例化每一个子组件,在 JSX 中只能使用 className
,因为 class
为保留字,其他的也类似。
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
在 return
的组件树中通过一个属性 value 的方式可以在组件之间传递数据。从父节点传递到子节点的数据称为 props
,是属性(properties)的缩写,通过 this.props.key
就可以访问到相应的 value
,通过 children
可以访问任何内嵌元素。在 JSX 中将 JavaScript 表达式放在大括号中,可以作为属性或者子节点,即遇到 <
符号渲染 HTML 标签,遇到 {
识别为 JS 表达式。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论