九. React的组合 VS 继承（Composition vs Inheritance）

React 拥有一个强大的组合模型，官网建议使用组合而不是继承以实现代码的重用。

一. 包含

一些组件在设计前无法获知自己要什么子组件，尤其在Sidebar和Dialog等通用"容器"中比较常见。
对于这种组件使用特别的children props来直接传递子元素到他们的输出中：

function FancyBorder(props) {
  return (
    

      {props.children}
    
  );
}

这时其他组件就可以通过嵌套JSX传递任意子组件：

function WelcomeDialog() {
  return (
    
      

        Welcome
      
      

        Thank you for visiting our spacecraft!
      
    
  );
}

有时候也可以使用占位符而不是children。

function SplitPane(props) {
  return (
    

      

        {props.left}
      
      

        {props.right}
      
    
  );
}

function App() {
  return (
    
      }
      right={
        
      } />
  );