Как переопределить компонент в React?

Question

Есть спа-центр для реагирования / редукса.Существует компонент брендов.Компонент Media похож на него, но данные извлекаются из другого запроса Ajax.Я пытаюсь унаследовать от брендов, но по какой-то причине компонентDidMount запускается из брендов.Как это сделать правильно?

class Media extends Brands {
  loadData = async () => {
  alert('sdfdf'); //not displayed
    const { dispatch, dataList, clientId } = this.props;
    if (!dataList && clientId) {
      dispatch(mainLoaderActions.addBlockingRequest("loadMedia"));

      const res = await mediaApi.getBrandsData(clientId);

      dispatch(dataActions.setBrandsList(res));
      dispatch(mainLoaderActions.deleteBlockingRequest("loadMedia"));
    }
  };

  componentDidMount() {
    alert('aaa'); //not displayed
    this.loadData();
  }

  render() {...

Answer 1

Это можно сделать с помощью HOC (компоненты более высокого порядка).Потребуется рефакторинг обеих функций для повторного использования стандартного поведения компонентов.Прочтите этот пост в официальных документах о реагировании: Компоненты высшего порядка

Компонент высшего порядка (HOC) - это усовершенствованный метод React для повторного использования логики компонентов.

Answer 2

React не поддерживает наследование классов, отсюда и ваша сложность!См. Документацию здесь: https://reactjs.org/docs/composition-vs-inheritance.html Здесь есть ответ на аналогичный вопрос: Метод componentDidMount не запускается при использовании унаследованного класса реакции ES6 с примером способа реагирования для достижения этой цели.