组合组件

包含关系

有些组件无法提前知晓它们子组件的具体内容. React 让我们使用props.children来解决这个问题:

function A(props) {
  return <div>{props.children}</div>;
}

function App() {
  return (
    <A>
      <p>hi</p>
      <p>你好</p>
    </A>
  );
}

对于A标签里的内容, 都会被当做props传递到A组件里, 我们可以使用props.children来将其渲染出来.

有时, 我们需要渲染多个目前未知的组件时, 就需要将其命名:

function A(props){
  return (
    <div>
      {props.left}
    </div>
    <div>
      {props.right}
    </div>
  )
}

function App(){
  return (
    <A>
      left = {<p>this is left</p>}
      right = {<p>this is right</p>}
    </A>
  )
}

在App组件的A标签里, left和right都分别作为A组件的props在A组件内部可以使用.