React 组件组合与数据传递:props

发布于 2023-10-12 01:55:19 字数 988 浏览 27 评论 0

每当创建新的子组件之后,都需要在根组件中的 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

友谊不毕业

暂无简介

0 文章
0 评论
22 人气
更多

推荐作者

13886483628

文章 0 评论 0

流年已逝

文章 0 评论 0

℡寂寞咖啡

文章 0 评论 0

笑看君怀她人

文章 0 评论 0

wkeithbarry

文章 0 评论 0

素手挽清风

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文