React 자체는 매우 강력한 조합 모델을 가지고 있기 때문에 정부는 조합을 사용하여 계승을 대체하여 구성 요소의 중용성을 실현하는 것을 강력히 건의한다.

1. 포용화 구성 요소

이른바 포용화 구성 요소란 아이가 무엇이든지 이 용기에 넣을 수 있는 하위 구성 요소이다. 예를 들어 우리의 Dialog 탄창이나 네비게이션 표시줄 등이다.
코드는 다음과 같습니다.

function FancyBorder(props) {
  return (
    
{'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    
  );
}

이런 형식의 코드는 우리로 하여금 임의로 JSX문장을 가입하게 할 수 있다

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

물론 props속성을 통해 증가

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      div>
      <div className="SplitPane-right">
        {props.right}
      div>
    div>
  );
}

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

2. 특수화 구성 요소

포용화 구성 요소를 확장하여 특정한 구성 요소를 형성한다. 예를 들어Dialog 전문적인 환영Dialog을 형성할 수 있다.

function Dialog(props) {
  return (
    "blue">
      
"Dialog-title">
{props.title}
      
"Dialog-message">
        {props.message}
      
    
  );
}
function WelcomeDialog() {
  return (
    
"Welcome"
      message="Thank you for visiting our spacecraft!" />
  );
}

물론 확장된 구성 요소를 클래스 구성 요소로 쓰는 것이 좋습니다
상속 실현에 대한 평가
정부는 facebook에서 대량의 React 구성 요소가 계승 방식으로 구성 요소를 다시 사용하지 않았다고 평가했다.
어셈블리 생성에 대한 의견
가능한 한 임의의 값을 받아들여 행동의 확장을 실현할 수 있는 구성 요소
만약 UI 구성 요소가 아닌 기능을 반복적으로 사용하려면, 구성 요소에 사용할 인터페이스를 제공하는 단독 javascript 모듈로 작성하는 것을 강력히 권장합니다.