如果我们需要向组件传递参数，可以使用 this.props 对象,实例如下：
  <div id="example"></div>
    <script type="text/babel">
      var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello {this.props.name}</h1>;
        }
      });
    ReactDOM.render(
      <HelloMessage name="前端攻城小牛" />,
      document.getElementById('example')
    );
   </script>
  </body>
<!-- 注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。-->
复制代码如果我们需要向组件传递参数，可以使用 this.props 对象,实例如下：
<body>
    <div id="example"></div>
    <script type="text/babel">
      var WebSite = React.createClass({
          render: function() {
            return (
              <div>
                <Name name={this.props.name} />
                <Link site={this.props.site} />
              </div>
            );
        }
      });
      var Name = React.createClass({
            render: function() {
              return (
                <h1>{this.props.name}</h1>
               );
            }
      });
     var Link = React.createClass({
          render: function() {
            return (
              <a href={this.props.site}>
                {this.props.site}
              </a>
            );
        }
    });
    React.render(
      <WebSite name="前端攻城小牛" site=" http://www.baidu.com" />,
      document.getElementById('example')
    );
   </script>
  </body>
复制代码React State(状态)
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。 React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。 以下实例中创建了 LikeButton 组件，getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。 当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
<body>
      <div id="example"></div>
      <script type="text/babel">
          var LikeButton = React.createClass({
            getInitialState: function() {
              return {liked: false};
          },
          handleClick: function(event) {
            this.setState({liked: !this.state.liked});
          },
          render: function() {
            var text = this.state.liked ? '找我' : '不找我';
            return (
                <p onClick={this.handleClick}>
                  你<b>{text}</b>我。点我加交流扣扣裙：864305860。
                </p>
              );
          }
        });
        React.render(
          <LikeButton />,
          document.getElementById('example')
        );
      </script>
    </body>
复制代码React Props
<body>
        <div id="example"></div>
        <script type="text/babel">
            var HelloMessage = React.createClass({
                render: function() {
                  return <h1>Hello {this.props.name}</h1>;
                }
            });
            ReactDOM.render(
                <HelloMessage name="前端攻城小牛" />,
              document.getElementById('example')
          );
      </script>
</body>
复制代码通过 getDefaultProps() 方法为 props 设置默认值，实例如下：
<body>
      <div id="example"></div>
      <script type="text/babel">
        var HelloMessage = React.createClass({
            getDefaultProps: function() {
              return {
                  name: '前端攻城小牛'
                };
            },
            render: function() {
                  return <h1>Hello {this.props.name}</h1>;
            }//欢迎加入全栈开发交流圈一起学习交流：864305860
        });//面向1-3年前端人员
        ReactDOM.render(//帮助突破技术瓶颈，提升思维能力
          <HelloMessage />,
          document.getElementById('example')
        );
    </script>
  </body>
复制代码总结 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对前端攻城小牛的支持。
本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。 最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。
扫一扫
2307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
