React组合模式强大，推荐使用组合而非继承来实现组件间代码重用。

1、包含关系children prop示例：

function FancyBorder (props) {  return (    <div className={ 'FancyBorder FancyBorder-' + props.color }>      { props.children }    </div>  )} function WelcomeDialog () {  return (    <FancyBorder color="orange" >      <h1 className="Dialog-title">        Welcome      </h1>      <p className="Dialog-message">        Thank you for visiting our spacecraft!      </p>    </FancyBorder>  )} ReactDOM.render(  <WelcomeDialog />,      document.getElementById('root'))

<FancyBorder> JSX 标签中的所有内容都会作为一个 children prop 传递给 FancyBorder 组件。自定义props组件，类似“插槽”

function SplitPane (props) {  return (    <div className="SplitePane">      <div className="Splite-left">        { props.left }      </div>      <div className="Splite-right">        { props.right }      </div>    </div>  )} function Contacts () {  return (    <div>Contact me.</div>  )} function Chat () {  return (    <div>Chat with me.</div>  )} function App () {  return (    <SplitPane      left={        <Contacts />      }      right={        <Chat />      } />  )} ReactDOM.render(  <App />,  document.getElementById('root2'))

可以将任何东西作为props进行传递<Contacts /> 和 <Chat /> 之类的 React 元素本质就是对象（object），所以你可以把它们当作 props，像其他数据一样传递2、特例关系有时，会把一些组件看作其他组件的特殊实例“特殊”组件可以通过 props 定制并渲染“一般”组件WelcomeDialog 可以说是 Dialog 的特殊实例

function Dialog (props) {  return (    <FancyBorder color="orange" >      <h1 className="Dialog-title">{ props.title }</h1>      <p className="Dialog-message">{ props.message }</p>    </FancyBorder>  )} function WelcomeDialog () {  return (    <Dialog title="Welcome"      message="Thank you for visiting our spacecraft!" />  )} ReactDOM.render(  <WelcomeDialog />,  document.getElementById('root3'))

3、组合同样适用于以class形式定义的组件示例：

function Dialog (props) {  return (    <FancyBorder color="orange" >      <h1 className="Dialog-title">{ props.title }</h1>      <p className="Dialog-message">{ props.message }</p>      { props.children }    </FancyBorder>  )} class SignUpDialog extends React.Component {  constructor (props) {    super(props)    this.state = { login: '' }     this.handleChange = this.handleChange.bind(this)    this.handleSignUp = this.handleSignUp.bind(this)  }   handleChange (e) {    this.setState({ login: e.target.value })  }   handleSignUp () {    console.log(`Welcome aboard, ${this.state.login}!`)  }   render () {    return (      <Dialog         title="Mars Exploration Program"        message="How should we refer to you?" >        <input value={ this.state.login } onChange={ this.handleChange } />        <button onClick={ this.handleSignUp }>Sign Me Up!</button>      </Dialog>    )  }} ReactDOM.render(  <SignUpDialog />,  document.getElementById('root4'))

关联文章：React笔记——核心概念：1.Hello WorldReact笔记——核心概念：2.JSX简介React笔记——核心概念：3.元素渲染React笔记——核心概念：4.组件&PropsReact笔记——核心概念：5.State&生命周期React笔记——核心概念：6.事件处理React笔记——核心概念：7.条件渲染React笔记——核心概念：8.列表&KeyReact笔记——核心概念：9.表单React笔记——核心概念：10.状态提升