React-14 组件复用

包含关系

• 组件作为参数传递 父组件

function Parents() => {
  return (
    <Child
      left = {
        <Contacts />
      }
      right = {
        <Chat/>
      }
    >
  )
}

子组件

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

• 变量作为参数传递 父组件

function Parents() => {
  return (
    <Child
      valueFromParents="value from parents"
    >
  )
}

子组件

function Child(props) => {
  return (
    <div>
     {props.valueFromParents} //value from parents
    </div>
  )
}