码迷,mamicode.com
首页 > 其他好文 > 详细

ReactNative--children

时间:2017-02-22 19:25:04      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:利用   bsp   container   数组   element   返回值   containe   https   baidu   

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")
    );

 

ReactNative--children

标签:利用   bsp   container   数组   element   返回值   containe   https   baidu   

原文地址:http://www.cnblogs.com/chebaodaren/p/6430164.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!