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

我不确定我是否理解你。为什么需要将它设为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>
    );
   }

Answer 2

如果一个组件有多个子代，则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>

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

编辑

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

与多个组件反应HOC

2 个答案:

编辑