1. <!DOCTYPE html>
    2. <html>
    3.  <head>
    4.    <script src="../build/react.js"></script>
    5.    <script src="../build/react-dom.js"></script>
    6.    <script src="../build/browser.min.js"></script>
    7.  </head>
    8.  <body>
    9.    <div id="example"></div>
    10.    <script type="text/babel">
    11.      var NotesList = React.createClass({
    12.        render: function() {
    13.          return (
    14.            <ol>
    15.              {
    16.                React.Children.map(this.props.children, function (child) {
    17.                  return <li>{child}</li>;
    18.                })
    19.              }
    20.            </ol>
    21.          );
    22.        }
    23.      });
    25.      ReactDOM.render(
    26.        <NotesList>
    27.          <span>hello</span>
    28.          <span>world</span>
    29.        </NotesList>,
    30.        document.getElementById('example')
    31.      );
    32.    </script>
    33.  </body>
    34. </html>
    37. this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点（查看 demo05）。
    38. 上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取，运行结果如下。
    39. 这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。
    40. React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法，请参考官方文档。