0

我正在向自己介绍 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？

4

2 回答 2

3

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

<PlayerTimeComtrol
  label={this.props.label}
  onChangeHandler={this.updatePlayerDelay}
>
  // with whatever component you want here
</PlayerTimeControl>
于 2020-03-19T21:21:48.040 回答
0

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

于 2020-03-19T21:20:49.060 回答