react总结

一、dangerouslySetInnerHTML, 让React正常显示你的html代码

var Test = React.createClass({
 
          getInitialState: function() {
            return {html: '我想让它换行显示<br />,我想让它换行显示<br />'};
          },
 
          render: function() {
 
            return (
 
              <div>{this.state.html}</div>
            );
          }
});
React.render(<Test />,  document.getElementById('example'));
  

显示效果：

我想让它换行显示<br />,我想让它换行显示<br />

应改为：

<div dangerouslySetHTML={{_html:this.state.html}}></div>

 

2、this.props对象的属性与组件的属性一一对应，但有一个例外，就是this.props.children属性，它表示组件的所有子节点

用法：

var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

this.props.children表示组件NotesList的所有子节点，由于this.props.children可能有三种值，undefined、Object、Array，React提供了React.Children这个工具方法来处理this.props.children，我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。