React入门教程（三）—— this.props

最新推荐文章于 2025-07-05 13:44:41 发布

原创最新推荐文章于 2025-07-05 13:44:41 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

html 同时被 2 个专栏收录

9 篇文章

订阅专栏

React

3 篇文章

订阅专栏

本文介绍如何使用React创建组件，并通过属性传递数据。演示了如何定义一个名为Hello的React组件，该组件接受一个name属性并在输出时使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

this.props

React允许将代码封装成组件，然后像插入普通 HTML 标签一样，在网页中插入这个组件。

//定义一个名为Hello的组件
//用方法React.createClass来创建一个组件
var Hello = React.createClass({
  //每一个组件中必须有一个render方法，用于输出组件
  render: function() {
    //使用return来返回要输出的内容
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  //插入模板<Hello />时，会生成Hello的一个实例，组件类的第一个字母必须大写
  <Hello name="wang" />,
  document.getElementById('example')
);

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如<Hello name="wang">，就是Hello组件加入一个name属性，值为wang。组件的属性可以在组件类的this.props对象上获取，比如name属性就可以通过this.props.name读取。