你的位置:首页 > Java教程

[Java教程]Reactjs 入门基础(二)



如果我们需要向组件传递参数,可以使用 this.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>
  注意,在添加属性时, 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>我。点我切换状态。
                </p>
              );
          }
        });

        React.render(
          <LikeButton />,
          document.getElementById('example')
        );
      </script>
    </body>

React Props

  使用 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>

默认 Props
    你可以通过 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>;
            }
        });

        ReactDOM.render(
          <HelloMessage />,
          document.getElementById('example')
        );
    </script>
  </body>