Расширение подключенного компонента с сохранением состояния

Question

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

Я создал фрагмент кода, который работает для свойств, но не для состояний.

BaseComponent:

import * as React from "react";

import { connect } from "react-redux";
import { IRootState } from "../../../Store/ApplicationStore";

interface IComponentStoreProps {
    storeProp?: boolean;
}

interface IComponentOwnState {
    myState?: string | number;
}

class BaseComponent<Props, State> extends React.Component<Props & IComponentStoreProps, State & IComponentOwnState> {
    constructor(props: Props & IComponentStoreProps) {
        super(props);
    }
}

export const BaseComponentConnected = <Props, State>() => {
    return connect(
        (state: IRootState): any => {
            return {
                storeProp: state.global.tfsRelatedData.isLoaded
            };
        }
    )(BaseComponent as new () => BaseComponent<Props & IComponentStoreProps, State & IComponentOwnState>);
};

ExtendedComponent:

interface IComponentOwnState {
    fieldValue: string;
}

interface IComponentStoreProps {
    isLoaded: boolean;
}

class ExtendedComponent extends BaseComponentConnected<IComponentStoreProps, IComponentOwnState>() {
 //this.props.isLoaded   -> exists
 //this.props.storeProp  -> exists
 //this.state            -> undefined
}

Как создать объединенный объект состояния в унаследованных классах?

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

Answer 1

Я немного смущен тем, что вы пытаетесь сделать. Вы пытаетесь заставить компонент «отец» вносить изменения в компонент «сын» - это идет вразрез с общей целью состояния против реквизита. Состояние компонента должно иметь значение только для него - никто другой не сможет получить к нему доступ, не говоря уже о его изменении. Согласно документации React :

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

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

Если вы настаиваете на использовании модели наследования, я отвечу вам так: вы должны объединить состояние самостоятельно, возможно, в конструкторе компонента. Я не могу найти инициализацию где-либо в вашем коде, поэтому могу только предположить, что она должна оставаться неопределенной (в конце концов, вы должны определить ее где-то).