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