免费AI编程助手
React：复合组件
var ProfilePic = React.createClass({
render: function() {
return (
<img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
);
}
});
var ProfileLink = React.createClass({
render: function() {
return (
<a href={'http://www.facebook.com/' + this.props.username}>
{this.props.username}
</a>
);
}
});
var Avatar = React.createClass({
render: function() {
return (
<div>
<ProfilePic username={this.props.username} />
<ProfileLink username={this.props.username} />
</div>
);
}
});
ReactDOM.render(
<Avatar username="pwh" />,
document.body
);
var MyCheckbox = React.createClass({
handleChange: function(event){
var checked = event.target.checked;
this.props.onChanged(checked);
},
render: function(){
return (
<label htmlFor="check1">
<input type="checkbox" id="check1" name="" onChange={this.handleChange}/>
选我
</label>
);
}
});
var MyForm = React.createClass({
handleChange: function(value){
if(value){
console.log('被选中了');
}else{
console.log('取消选中');
}
},
render: function(){
return (
<div className="form-group">
<MyCheckbox onChanged={this.handleChange}/>
</div>
);
}
});
ReactDOM.render(
<MyForm />,
document.body
);
var Parent = React.createClass({
render: function(){
return (
<div>
{this.props.children}
</div>
);
}
});
ReactDOM.render(
<Parent><p>123</p></Parent>,
document.body
);
//渲染结果
<div>
<p>123</p>
</div>
不过，我们可以通过 React.Children 工具类来操作，就不需考虑这些了。
React.Children工具类共有四个方法：
React.Children.map、React.Children.forEach、React.Children.count、React.Children.only
（1）React.Children.map
React.Children.map(object children, funciton fn[,object context])
在每一个直接子级（包含在 children 参数中的）上调用 fn 函数，此函数中的 this 指向 上下文。如果 children 是一个内嵌的对象或者数组，它将被遍历：不会传入容器对象到 fn 中。如果 children 参数是 null 或者 undefined，那么返回 null 或者 undefined 而不是一个空对象。
var Parent = React.createClass({
render: function(){
return (
<div>
{
React.Children.map(this.props.children,function(item,i){
return item;
})
}
</div>
);
}
});
ReactDOM.render(
<Parent>
<p>1</p>
<p>2</p>
</Parent>,
document.body
);
//渲染结果
<div>
<p>1</p>
<p>2</p>
</div>
（2）React.Children.forEach
React.Children.forEach(object children, function fn [, object context])
类似于 React.Children.map()，但是不返回对象。
（3）React.Children.count
React.Children.count(object children)
返回 children 当中的组件总数，和传递给 map 或者 forEach 的回调函数的调用次数一致。
（4）React.Children.only
React.Children.only(object children)
返回 children 中仅有的子级。否则抛出异常。这里仅有的子级，only方法接受的参数只能是一个对象，不能是多个对象（数组）。
总结
- 在React中，构建页面的基础单元是React组件。写React组件主要就是构建组件。
- React的复合（composition）能力允许我们通过结合小巧的、简单的组件和数据对象，来构造大而复杂的组件。
- 子组件与其父组件通信的最简单方式就是使用属性（props）。父组件需要通过属性传入一个回调函数，子组件在需要时进行调用。
- 可以使用React.children工具栏去操作this.props.children（子节点）
更多建议：