Reactjs [反应]：直观地排除另一组分

假设我有一个组件父级

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

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

我想让开发人员选择将自己的组件1转移到其他组件中。他的用法看起来有点像这样：

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

{prop1}
{prop2}

因此，我的问题是：

• 我怎么可能允许呢？在我的组件上转换特定组件

• 这种做法可以（不一定是好的，但很实用）吗

---

谢谢

我认为，如果您希望API符合这一要求，那么这样做完全可以。这也很简单

要实现这一点，您需要使用

props.children

。然后，它将包括组件的开始标记和结束标记之间的任何内容：

在您的示例中，

组件的渲染函数为：

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

render（）{
返回
{this.props.children}
}
您可以将父组件用作可以容纳其他组件的容器

class Parent extends Component{

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

类父级扩展组件{
render（）{
返回{this.props.children}
}
}

这可以用在

class SomeComponent{

render(){

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

class组件{
render（）{
返回
}
}
我想我要做的是允许转换Component1，但也可以通过设置props来允许默认Component1。如果开发人员声明它，它只会呈现一个转置的组件1，否则会设置默认值。我不确定你的意思。你能用更多的细节更新你的问题吗？
或
{prop1}
如果你认为这是堆栈溢出社区的解决方案，请接受它作为答案，如果你觉得它有用，请向上投票