这是一个有效的 React HoC 用例吗？

Question

我正在向自己介绍 React 的 HoC 模式。

我有一个视频播放器组件，有时需要 select 来更改视频 src url 中的参数。

为了简化，这是我的 HoC 的简化版本：

function withTimeControl(PlayerComponent) {
  return class extends Component {
    state = {
      src: ''
    }

    updatePlayerDelay = (event) => {
      this.setState({
        src: event.target.value
      })
    }

    render() {
      return(
        <div>
          <PlayerComponent 
            title={this.props.title}
            src={this.state.src}
          />

          <PlayerTimeComtrol
            label={this.props.label}
            onChangeHandler={this.updatePlayerDelay}
          />
        </div>
      );
    }
  };
}

要使用它，我会这样做：

const PlayerWithTimeControl = withTimeControl(Player)

// ...

<PlayerWithTimeControl title='Player title' label='Time control label' />

PlayerComponent 是被包装的组件。 HoC 基本上是广告一个组件，PlayerTimeComtrol 来改变视频播放器的src。

这是有效的用例吗？还有其他更准确的解决方案吗？也许只使用组件包装器而不是 HoC？

Answer 1

从技术上讲，这是一种可以使用的方法。但 HOC 通常处理数据流添加/拦截，而不是 UI。 IMO，它们应该谨慎使用。当你可以让PlayerTimeComtrol 接受children 道具并将其包裹在PlayerComponent 周围时，这真的感觉像是过度设计。

<PlayerTimeComtrol
  label={this.props.label}
  onChangeHandler={this.updatePlayerDelay}
>
  // with whatever component you want here
</PlayerTimeControl>

Answer 2

是的，这正是 HoC 的用途：为现有组件添加功能。