Javascript 与多个组件进行交互

我想创建一个React HOC，理想情况下它将接收两个组件，而不是一个包装的组件，并在它们之间切换。也就是说，在下面的代码中，它们将分别表示子组件，而不是

组件一

和

组件二

。我怎样才能做到这一点？我将如何编写这篇文章的一些psuedo代码：

<HOC>
  <ComponentOne />
  <ComponentTwo />
</HOC>

<HOC
  componentOne={<ComponentOne />}
  componentTwo={<ComponentTwo />}
/>

hoc(componentOne, componentTwo)

hoc（组件一、组件二）

class.com组件{
构造函数（）{
超级（）；
此.state={
onClick:false，
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
this.setState（{onClick:！this.state.onClick}）；
}
render（）{
返回(
点击我！
{ 
这个.state.onClick？
第一部分：
第二部分
}
);
}
}
ReactDOM.render（，app）
我不确定我是否理解你的意思。你为什么需要它呢

如果您要将组件作为道具传递，请执行以下操作：

<HOC
  componentOne={<ComponentOne />}
  componentTwo={<ComponentTwo />}
/>



然后你就可以使用道具访问它们了

render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click Me!</button>
        { 
          this.state.onClick ?
            this.props.componentOne :
            this.props.componentTwo
        }
      </div>
    );
   }

render（）{
返回(
点击我！
{ 
这个.state.onClick？
此.props.componentOne：
这个。道具。组件二
}
);
}
如果一个组件有多个子组件，那么
这个.props.children
将是一个数组

class HOC extends React.Component {

    // ... rest of code ....

    render() {
        const { onClick } = this.state;
        const { children } = this.props;

        return !onClick ? children[0] : children[1];
    }
}

然后像这样使用它：

<HOC>
    <div>Child One</div>   
    <div>Child Two</div>
</HOC>

是的，基本上是这样。我只是想知道，这是在另一个组件中传递和处理多个组件的最优雅的方式吗？显然，使用React HOC和
this.props.children
可以呈现子道具/组件，但在必须逻辑处理多个子组件时，您实际上无法使用这些工具。有点困惑。。。您想传递两个以上的组件吗？
class HOC extends React.Component {

    // ... rest of code ...

    render() {
        const { onClick } = this.state;
        const children = React.Children.toArray(this.props.children);

        return !onClick ? children[0] : children[1];
    }
}