[реагировать]: интуитивно включить другой компонент

Question

Скажите, у меня есть компонент Parent

<Parent>
  <Component1 prop1={prop1} prop2={prop2}/>
  <Component2 prop3={prop3} />
</Parent>

Обычно, пропуская prop1,2 и 3, делает идеально пригодный родительский компонент. Однако я хочу, чтобы этот компонент был таким же интуитивно понятным и динамичным, как и компоненты в библиотеках пользовательского интерфейса (например, это делает antd).

Я бы хотел дать разработчику возможность включить его собственный компонент1. Его использование будет выглядеть примерно так:

<Parent prop3={prop3}>
  <Component1>
    <div> {prop1} </div>
    <div> {prop2} </div>
  </Component1>
</Parent>

Итак, мои вопросы:

• Как бы я это допустил? включение конкретного компонента в мой компонент?

• это нормально (не обязательно хорошая, но практическая) практика?

Спасибо!

Answer 1

Вы можете использовать родительский компонент в качестве контейнера, который может содержать другие компоненты.

class Parent extends Component{

render(){
return <div>{this.props.children}</div>
}
}

И это можно использовать как,

class SomeComponent{

render(){

return <Parent><Child1/><Child2></Parent>
}
}

Answer 2

Я думаю, что это прекрасно, если вы этого хотите для своего API.Это также довольно просто.

Для этого вам нужно использовать props.children.Затем он будет включать все, что находится между открывающим и закрывающим тегом компонента:

В вашем примере функция рендеринга Component будет иметь вид:

render() {
  return <div className="outer-shell">
   {this.props.children}
  </div>
}