React Antd Modal 属性 'children' 在类型 'IntrinsicAttributes & ModalProps' 上不存在

Question

升级到 React 18 后，Antd 出现以下问题。

当使用来自 Antd 的组件（Modal、Dialog 等）时，出现此错误：

TS2322: Type '{ children: ReactNode; ref: ForwardedRef<unknown>; className: string; visible: true; onCancel: (() => void) | undefined; onOk: undefined; footer: null; closable: false; }' is not assignable to type 'IntrinsicAttributes & ModalProps'.   Property 'children' does not exist on type 'IntrinsicAttributes & ModalProps'.

这是我的组件：

function TransitionsModal(props: Props): JSX.Element {
  const {
    open,
    onClose,
    children
  } = props;

  return (
    <div>
      {open &&
        <Modal
          className="flex items-center justify-center"
          visible={open}
          onCancel={onClose}
          onOk={undefined}
          footer={null}
          closable={false}>
          {children}
        </Modal>
      }
    </div>

  );
}

这是我的道具：

type Props = {
  children: React.ReactNode,
  open: boolean,
  onClose?: () => void
}

我使用节点 17.8.0

Answer 1

你应该使用

"@types/react": "17.0.39"

而不是

"@types/react": "18.0.3"

因为 react18 @types 还不兼容。

Answer 2

问题与 React 18 中类型的最新更新有关。如果您使用纱线，为了避免此错误，一种解决方案是使用 package.json 中的分辨率和一些较低版本的 React。这样您的依赖项将被指示使用不同版本的类型。

示例：

"resolutions": { "@types/react": "17.0.30" }

Answer 3

我更喜欢使用此注释来忽略 TS 错误而不是降级类型

const MasonryBrick: FC<PostCardType> = ({ imgSrc, title, excerpt }) => {
  return (
    // @ts-ignore this lib is incompatible with react18
    <Slide triggerOnce direction="up">
        <div className={s.context}>
          <h2>{title}</h2>
          <p>{excerpt}</p>
        </div>
    </Slide>
  );
};

React Antd Modal 属性 'children' 在类型 'IntrinsicAttributes & ModalProps' 上不存在

React Antd Modal Property 'children' does not exist on type 'IntrinsicAttributes & ModalProps'

typescript

reactjs

antd