reactjs 语法收集

ReactDOM.render

var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
  ];
  ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);

React.createClass

 var HelloMessage = React.createClass({
    render: function() {
          return <h1>Hello {this.props.name}</h1>;
    }
  });

  ReactDOM.render(
    <HelloMessage name="John" />,
    document.getElementById('example')
  );
  

属性

1). this.props.name

添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

2). this.props.children

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

3). PropTypes

4). getDefaultProps

5). this.refs.[refName]
从组件中获取真实DOM 的节点

6). this.state

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 ? 'like' : 'haven\'t liked';
       return (
           <p onClick={this.handleClick}>
           You {text} this. Click to toggle.
          </p>
      );
    }
});

ReactDOM.render(
   <LikeButton />,
   document.getElementById('example')
);

由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。