⑩ 组合 vs 继承

1包含关系

1.1 多数情况下

① 使用 children prop 来将子组件传递渲染

function FancyBorder(props) {
  return (
    <div className={ props.color }>
      { props.children }
    </div>
  )
}

② 使得别的组件可通过 jsx 嵌套，将任意组件作为子组件传递给它们

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1>Welcome</h1>
      <p>Thank you for visiting our spacecraft!</p>
    </FancyBorder>
  )
}

1.2 少数情况：将所需要内容传入 props，并使用相应的 prop

function SplitPane(props) {
  return (
    <div>
      <div>{ props.left }</div>
      <div>{ props.right }</div>
    </div>
  )
}
function App() {
  return (
    <SplitPane
     left={ <Contacts /> }
     right={ <Chat /> }
    >
  )
}

2 特例关系

2.1 特殊组件可以通过 props 定制并渲染一般组件

function Dialog() {
  return (
    <FancyBorder color="blue">
      <h1>{ props.title }</h1>
      <p>{ props.message }</p>
    </FancyBorder>
  )
}
function WelcomeDialog() {
  return (
    <Dialog
     title="Welcome"
     message="Thank you for visiting our spacecraft!"
    />
  )
}

2.2 组合 + 特殊组件

function Dialog() {
  return (
    <FancyBorder color="blue">
      <h1>{ props.title }</h1>
      <p>{ props.message }</p>
      { props.children }
    </FancyBorder>
  )
}
class SignUpDialog extends React.Component {
  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleSignUp = this.handleSignUp.bind(this)
    this.state = { login: '' }
  }
  render() {
    return (
      <Dialog title="Welcome"
              message="How should we refer to you?"
      >
        <input value={ this.state.login }
               onChange={ this.handleChange } />
        <button onClick={ this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    )
  }
  handleChange(e) {
    this.setState({ login: e.target.value })
  }
  handleSignUp(e) {
    talert(`Welcome abord, ${this.state.login}!`)
  }
}

3 继承

如果你想要在组件间复用非 UI 的功能，我们建议将其提取为一个单独的 js 模块，如函数、对象或者类。

组件可以直接引入（import）而无需通过 extend 继承它们。