2

嗨，我正在尝试修复的组件有一个小打字问题：

interface ChildrenProps {
  exit: (force?: boolean) => void;
  state: StateValue;
}
interface Props {
  // https://reactjs.org/docs/render-props.html
  children: (childrenProps: ChildrenProps) => {};
  close: () => void;
  isOpen: boolean;
  state: StateValue;
}
const ModalDialog: React.FC<Props> = function (props) {
  const { children, close, isOpen } = props;
  const layers = useContext(LayersContext);
  const [state, send] = useMachine(modelDialogMachine, {
    actions: {
      close,
    },
  });
  ...
  const childrenProps = { state: state.value, exit: sendExitEvent };

  return ReactDOM.createPortal(
    <ModalDialogContext.Provider value={contextValue}>
      <Backdrop className={state.value} onClick={handleBackdropClick}>
        <Dialog onClick={handleDialogClick}>{children(childrenProps)}</Dialog>
      </Backdrop>
    </ModalDialogContext.Provider>,
    container,
  );
};

在 <Backdrop className={state.value} onClick={handleBackdropClick}>我得到：

 Type 'StateValue' is not assignable to type 'string | undefined'.
      Type 'StateValueMap' is not assignable to type 'string'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", DefaultTheme, {}, never>): ReactElement<StyledComponentPropsWithAs<"div", DefaultTheme, {}, never>, string | ... 1

状态机库StateValue中的类型import { StateValue } from 'xstate'在哪里。xstate

类名用于在样式之间切换：

export const Backdrop = styled.div`
  &.entering {
  ...

我该如何解决这个打字错误？嗨，我正在尝试修复的组件有一个小打字问题：

interface ChildrenProps {
  exit: (force?: boolean) => void;
  state: StateValue;
}
interface Props {
  // https://reactjs.org/docs/render-props.html
  children: (childrenProps: ChildrenProps) => {};
  close: () => void;
  isOpen: boolean;
  state: StateValue;
}
const ModalDialog: React.FC<Props> = function (props) {
  const { children, close, isOpen } = props;
  const layers = useContext(LayersContext);
  const [state, send] = useMachine(modelDialogMachine, {
    actions: {
      close,
    },
  });
  ...
  const childrenProps = { state: state.value, exit: sendExitEvent };

  return ReactDOM.createPortal(
    <ModalDialogContext.Provider value={contextValue}>
      <Backdrop className={state.value} onClick={handleBackdropClick}>
        <Dialog onClick={handleDialogClick}>{children(childrenProps)}</Dialog>
      </Backdrop>
    </ModalDialogContext.Provider>,
    container,
  );
};

在 <Backdrop className={state.value} onClick={handleBackdropClick}>我得到：

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | ... 252 more ... | "onTransitionEndCapture"> & { ...; }, "ref" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "ref" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type 'StateValue' is not assignable to type 'string | undefined'.
      Type 'StateValueMap' is not assignable to type 'string'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", DefaultTheme, {}, never>): ReactElement<StyledComponentPropsWithAs<"div", DefaultTheme, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.

状态机库StateValue中的类型import { StateValue } from 'xstate'在哪里。xstate

类名用于在样式之间切换：

export const Backdrop = styled.div`
  &.entering {
  ...

如果我确实console.log得到state.value字符串：

ModalDialog.js:79 exited
ModalDialog.js:79 entering
ModalDialog.js:79 entered

键入StateValue和StateValueMap

export declare type StateValue = string | StateValueMap;

export interface StateValueMap {
    [key: string]: StateValue;
}

我该如何解决这个打字错误？

4

0 回答 0