Как подменить обработчик событий при наследовании в React?

Question

[Дмитрий]

Допустим у нас есть компонент

class Dropdown1 extends React.component {
  
  onClickHandler(e) {
    console.log(e.target.innerText)  
  }
  
  render() {
    return (
      <ul>
        {[1, 2, 3].map((number, i) => 
          <li key={i} onClick={this.onClickHandler}>{number}</li>)
        }
      </ul>
    )}
}

Я хочу сделать дочерний компонент, который
а) в начало списка добавлял бы <li>0</li>
б) Подменял бы обработчик onClickHandler на свой

Как это сделать используя наследование и/или композицию не меняя родительский компонент?

Answer 1

[0xD34F]

Не надо наследования. Делайте обёртку для основного компонента, которая будет передавать новый обработчик в качестве параметра. А основной компонент будет устанавливать переданный обработчик, или, если его нет, собственный. Например.

Comments

[Дмитрий]

Другими словами без смены основного компонента никак?

[0xD34F]

Дмитрий, что значит "смена основного компонента"?

[Дмитрий]

0xD34F, "А основной компонент будет устанавливать переданный обработчик, или, если его нет, собственный. "

[0xD34F]

Дмитрий, мне кажется, вы плохо понимаете, чего хотите.

[Дмитрий]

0xD34F, Я очень хорошо понимаю чего хочу и очень ясно описал это в вопросе. Я хочу знать, возможно ли подменить обработчик, не переписывая основной компонент и вставить внутрь элемент, не переписывая основной компонент.

Чтобы там осталось onClick={this.onClickHandler}, Не поменянное на onClick={this.props.onClickHandler || this.onClickHandler}

[Дмитрий]

0xD34F, То есть грубо говоря, если мы используем обертку, то можем ли что-то делать с this.props.children, кроме как вывести их?

[0xD34F]

Дмитрий, подменить обработчик без переписывания компонента - да, можно с помощью наследования, объявив в наследнике метод с таким же именем. Но сильно сомневаюсь, что такое делать нужно.

Что касается манипуляций с контентом - извините, тут я не могу угнаться за вашими мыслями. Отчего-то кажется, что исходный компонент написан криво и должен быть переписан.

Answer 2

[Антон Спирин]

Просто передавайте данные и обработчик в компонент в виде свойств:

<DropDown onClickHandler={yourHandler} data={yourData} />

class Dropdown extends React.component {  
  render() {
    const { data, onClickHandler } = this.props;

    return (
      <ul>
        {data.map((number, i) => 
          <li key={i} onClick={onClickHandler}>{number}</li>
        )}
      </ul>
    )}
}

Comments

[Дмитрий]

Это очевидные вещи, у меня была надежда, что можно сделать чистое наследование, не трогая основной компонент, а просто подменив onClickHandler и получив this.props.children каким-то образом вставить внутрь дополнительный тэг. Но видимо нельзя.

[Антон Спирин]

Дмитрий, наследование в React разработке применяют в очень редких случаях. В вашем случае, без него можно обойтись. Что неправильно в вашем примере, так это хардкодить в универсальном компоненте данные и обработчик клика.