[反应]：直观地转换另一个组件

Question

假设我有一个组件Parent

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

通常，传递prop1,2和3将呈现一个完全可用的父组件。但是，我希望这个组件像ui库中的组件一样直观和动态（例如，antd就是这样）。

我想让开发人员选择转换他自己的component1。他的用法看起来有点像这样：

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

所以我的问题是：

• 我怎么能允许？在我的组件上划分特定组件？

• 这是可以的（不一定是好的，但实际的）练习吗？

谢谢！

Answer 1

我认为这样做完全没问题，如果这就是你想要的API。它也很简单。

要实现此目的，您需要使用props.children。然后它将包括组件的开始和结束标记之间的任何内容：

在您的示例中，Component的渲染函数将是：

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