九.|九. React的组合 VS 继承(Composition vs Inheritance)

【九.|九. React的组合 VS 继承(Composition vs Inheritance)】React 拥有一个强大的组合模型,官网建议使用组合而不是继承以实现代码的重用。
一. 包含
一些组件在设计前无法获知自己要什么子组件,尤其在Sidebar和Dialog等通用"容器"中比较常见。
对于这种组件使用特别的children props来直接传递子元素到他们的输出中:

function FancyBorder(props) { return ({props.children}); }

这时其他组件就可以通过嵌套JSX传递任意子组件:
function WelcomeDialog() { return ( WelcomeThank you for visiting our spacecraft!
); }

有时候也可以使用占位符而不是children。
function SplitPane(props) { return ({props.left}{props.right}); }function App() { return (} right={ } /> );

    推荐阅读