Компонент Ho C подключен к компоненту redux arround, подключенному к redux

Question

У меня есть базовый компонент, скажем, BaseContainer, который подключается к redux и имеет несколько методов. Теперь я хочу создать несколько CustomContainer компонентов, которые тоже должны быть подключены к redux и должны иметь доступ ко всем методам и состоянию BaseContainer компонента.

Итак, BaseContainer будет:

class BaseContainer extends React.Component {
   state = {};
   
   method1() {};
   method2() {};
   method3() {};
}
export default connect(mapStateToProps, mapDispatchToProps)(BaseContainer);

И один из CustomContainers должен быть:

   class CustomContainer extends BaseContainer {
       // should have access to all imports, methods and props of BaseContainer
    }
    export default connect(mapStateToProps, mapDispatchToProps)(CustomContainer);

Пробовал, но кажется, что наследование не работает в React, и это тоже не рекомендуется. Здесь я получаю ошибку Super expression must either be null or a function.

Пробовал другой подход с использованием Ho C:

class CustomContainer extends React.Component {
           // should have access to all imports, methods and props of BaseContainer
        }
        export default connect(mapStateToProps, mapDispatchToProps)(BaseContainer(CustomContainer));

, и теперь я столкнулся с ошибкой: Unhandled Rejection (TypeError): Object(...) is not a function

Что не так и как я могу добиться того, чтобы мой CustomContainer имел доступ ко всем импортам, свойствам и состоянию BaseContainer?

Answer 1

Вероятно, вам следует прочитать документацию по реакции, в частности Состав против наследования . React отдает предпочтение композиции перед наследованием. BaseContainer также не является компонентом более высокого порядка, а скорее является обычным компонентом и, похоже, не возвращает ничего для рендеринга.

компонент более высокого порядка

Вот реализация, которая, я думаю, поможет вам приблизиться к тому, что вам нужно

const withBaseCode = WrappedComponent => {
  class BaseContainer extends Component {
    state = {};

    method1 = () => {...}
    method2 = () => {...}
    method3 = () => {...}

    render() {
      return (
        <WrappedComponent
          method1={this.method1}
          method2={this.method2}
          method3={this.method3}
          {...this.props}
        />
      );
    }
  }

  const mapStateToProps = state => ({...});
  const mapDispatchToProps = {...};

  return connect(mapStateToProps, mapDispatchToProps)(BaseContainer);
};

Затем использовать обычный HO C, поэтому с учетом некоторого компонента

const CustomContainer = ({ method1, method2, method3, ...props}) => {
  ...

  return (
    ...
  );
};

const CustomContainerWithBaseCode = withBaseCode(CustomContainer);

Контейнер некоторых приложений

function App() {
  return (
    <div className="App">
      ...

      <CustomContainerWithBaseCode />
    </div>
  );
}

Демонстрация приведенного выше кода минус фактически подключение к хранилищу redux.

Редактировать пример компонента более высокого порядка