使用多个组件响应 HOC

Question

我想创建一个 React HOC，理想情况下它会接收两个组件而不是一个包装的组件并在它们之间切换。也就是说，在下面的代码中，它们将分别表示子组件，而不是 <h3>component one</h3> 和 <h3>component two<h3> 。我该如何才能做到这一点？关于我如何编写此 HOC 的一些伪代码：

<HOC>
  <ComponentOne />
  <ComponentTwo />
</HOC>
<HOC
  componentOne={<ComponentOne />}
  componentTwo={<ComponentTwo />}
/>
hoc(componentOne, componentTwo)

class HOC extends React.Component {
    constructor() {
    super();
    this.state = {
      onClick: false,
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({onClick: !this.state.onClick});
  }
    
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click Me!</button>
        { 
          this.state.onClick ?
            <h3>component one</h3> :
            <h3>component two</h3>
        }
      </div>
    );
  }
}
ReactDOM.render(<HOC />, app);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 1

如果一个组件有多个子组件，那么this.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>

显然，这仅适用于两个孩子，但您可以通过传递一个整数来扩展它 <HOC> 通过 props 告诉它选择哪个孩子。

编辑

快速浏览文档后，这是我上面写的更好的版本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];
    }
}

Answer 2

我不确定我是否理解你。为什么需要它是 HOC？

如果您将组件作为这样的道具传递：

<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>
    );
   }