Как переопределить react-компонент?

Question

[daima]

Имеется SPA на react/redux. Есть компонент Brands. Компонент Media похож на него, но данные получает из другого аякс-запроса. Пытаюсь отнаследоваться от Brands, но почему-то componentDidMount в Media запускается от Brands. Как сделать правильно?

class Media extends Brands {
  loadData = async () => {
    alert('sdfdf'); // не выводится
    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'); // не выводится
    this.loadData();
  }

  render() {

Comments

[Dmitriy Uvarov]

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

На моей памяти вы первый, кто наследуется от кастомного компонента, это частая практика у вас на проекте?

Answer 1

[Dmitry Alekseev]

Не совсем понятна проблема. Вот пример sandbox

Есть компонент Main, в котором есть метод render и есть компонент Second, унаследованный от Main. ComponentDidMount вызывается от Second, а render от Main