React组合
认识组合
·····实现组件间的代码重用(即也就是减少代码量,跟用原型链继承一样,但我们不用继承而用组合),用以代替继承。
用组合解决问题
有关包含关系的问题
有些组件无法提前知道它子组件的内容
解决思路:就是将这些组件用一个特殊的 children props 来将它们的子组件传递到渲染结果中:
function One(props) {
return (
<div>{props.children}</div>
//特殊的children props
);
}
function Two(props) {
return (
//这使别的组件可以通过JSX嵌套,来将任意组件作为子组件来传递给他们
<One>
<div>Hello</div>
<div>World</div>
</One>
);
}
特例关系问题
有些时候,我们可以将一些组件看成其它组件的实例:
function One(props) {
return (
<div> {props.left} </div>
<div> {props.right} </div>
);
}
function Two(porps) {
return(
<One left="hello"
right = "world" />
);
}
Two 就可以说为 One 的特殊实例