ReactNative--children

Posted 2020-09-01 车宝的笔记

this.props.children
children是一个例外，不是跟组件的属性对应的
表示组件的所有子节点

html5中有一种标签：列表 <ul> <ol> <li>

定义一个列表组件，列表项中显式的内容，以及列表项的数量都由外部决定

    var ListComponent = React.createClass({
      render: function () {
        return (
          <ul>
            {
              /*
                  列表项内容及数量不确定，需要在创建模板时才能确定
                  利用this.props.children从父组件获取需要展示的列表项内容

                  获取列表项内容后，需要遍历children，逐项进行设置
                  使用React.Children.map方法
                  返回值： 数组对象。这里数组中的元素是<li>
              */
              React.Children.map(this.props.children, function(child){
                return <li>{child}</li>
              })
            }
          </ul>
        )
      }
    });

    ReactDOM.render(
      (
        <ListComponent>
          <h1>lanou</h1>
          <a href = "https://www.baidu.com">https://www.baidu.com</a>
        </ListComponent>
      ),
      document.getElementById("container")
    );