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 是會隨著使用者互動而產生變化的特性。