Это действительный вариант использования React Ho C? - PullRequest
Новая
       43

Это действительный вариант использования React Ho C?

0 голосов
/ 20 марта 2020

Я знакомлюсь с шаблоном React Ho C.

У меня есть компонент видеоплеера, который иногда должен иметь select для изменения параметра в URL sr c video.

Чтобы упростить вещи, это уменьшенная версия моего Хо C: 

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 - это оборачиваемый компонент. Ho C в основном рекламирует компонент PlayerTimeComtrol, чтобы изменить sr c видеопроигрывателя.

Это допустимый вариант использования? Есть ли другие более точные решения для этого? Может, просто использовать компонентную обертку, а не Ho C?

Ответы [ 2 ]

3 голосов
/ 20 марта 2020

Технически это подход, который можно использовать. Но HOC, как правило, имеют дело с сложением / перехватом потока данных, а не с пользовательским интерфейсом. ИМО, их следует использовать экономно. Это действительно похоже на переподготовку, когда вы можете просто PlayerTimeComtrol принять children реквизит и обернуть его вокруг PlayerComponent

<PlayerTimeComtrol
  label={this.props.label}
  onChangeHandler={this.updatePlayerDelay}
>
  // with whatever component you want here
</PlayerTimeControl>
0 голосов
/ 20 марта 2020

Да, именно для этого предназначены HoC: добавление функциональных возможностей к существующим компонентам.

...