这是一个有效的 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 的用途：向现有组件添加功能。

Answer 2

从技术上讲，这是一种可以使用的方法。但是 HOC 通常处理数据流 addition/interception，而不是 UI。 IMO，应谨慎使用它们。这真的感觉像是过度工程，当你可以让 PlayerTimeComtrol 接受一个 children 道具并将它包裹在 PlayerComponent

周围时

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

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

Is this a valid React HoC use case?

javascript

design-patterns

reactjs

high-order-component