Блог

Итак, вот мой код

 interface CustomStepProps {
    isComplete: boolean;
    currentStep?: number;
    stepIndex?: number;
    cantBack?: boolean;
    isInFinalStep?: boolean;
    backHandler?: () => void;
    nextHandler?: () => void;
}

const Loki: React.FC<{
    steps: Step[];
    onFinish: () => void;
    backLabel?: string | React.ReactElement | React.ReactComponentElement;
    nextLabel?: string | React.ReactElement | React.ReactComponentElement;
    finishLabel?: string | React.ReactElement;
    noActions?: boolean;
    renderSteps?: (props: CustomStepProps) => React.ReactElement;
    renderActions?: (props: CustomStepProps) => React.ReactElement;
    renderComponents?: (props: CustomStepProps) => React.ReactElement | React.ReactComponentElement;
}>;

export interface CustomActionsProps {
    isComplete: boolean;
    cantBack: boolean;
    isInFinalStep: boolean;
    backHandler: () => void;
    nextHandler: () => void;
}
const CustomActions: React.FC<CustomActionsProps> = (props) => {
    const { isComplete, cantBack, isInFinalStep, backHandler, nextHandler } = props;
    return (
        <div className="button-group">
            <button
                type="button"
                className="btn btn-secondary btn-sm"
                onClick={backHandler}
                disabled={cantBack || isComplete}
            >
                Go back
            </button>
            <button
                type="button"
                className="btn btn-outline-primary btn-sm"
                onClick={nextHandler}
                disabled={isComplete}
            >
                {isInFinalStep ? `Finish HIM` : `Go Next`}
            </button>
        </div>
    );
};
const Stepper: React.FC<StepProps> = (props) => {
    const { setFinish } = props;
    return (
        <div>
            <Loki steps={objectStep} onFinish={setFinish} renderActions={CustomActions} />
        </div>
    );
};
 

В этом и заключается ошибка:

 (JSX attribute) renderActions?: ((props: CustomStepProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>) | undefined
Type 'FC<CustomActionsProps>' is not assignable to type '(props: CustomStepProps) => ReactElement<any, string | ((props: any) => ReactElement<any, any> | null) | (new (props: any) => Component<any, any, any>)>'.
  Types of parameters 'props' and 'props' are incompatible.
    Type 'CustomStepProps' is not assignable to type 'PropsWithChildren<CustomActionsProps>'.
      Type 'CustomStepProps' is not assignable to type 'CustomActionsProps'.
        Types of property 'cantBack' are incompatible.
          Type 'boolean | undefined' is not assignable to type 'boolean'.
            Type 'undefined' is not assignable to type 'boolean'.ts(2322)
react-loki.d.ts(29, 3): The expected type comes from property 'renderActions' which is declared here on type 'IntrinsicAttributes amp; { steps: Step[]; onFinish: () => void; backLabel?: any; nextLabel?: any; finishLabel?:
 

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