Type '{ children: Element; }'与类型'IntrinsicAttributes＆AnimatePresenceProps'没有共同的属性。ts（2559）

Question

这个错误突然开始出现：

但是如果我创建一个包裹组件，将props展开并引入子组件，则不会出现错误：

const WorkingVersion = (props: {id?: number}) => <SimpleComponent {...props}><div>hello</div></SimpleComponent>

在 TypeScript 的 CodeSandbox 上没有出现这个问题，这让我认为这是我机器上的特定问题。

我尝试回滚到最后一个可工作的版本，但它并没有解决我遇到的问题。

我应该寻找什么原因可能导致这个错误弹出？

- meds

Answer 1

这是最近由于 types of react v18 的此 PR引起的一个bug。其他人在更新后也遇到了相同的问题，具体情况可以查看这里最近开放的问题。我的建议是将 react types 降级直到他们发布针对此问题的热修复版本。另请参见此问题。

- Yago Biermann

---

我最终降级回到React 17，直到我使用的所有模块都更新为兼容版本。 - meds

这对我的项目也起作用了，降级到17，我能够编译出来。等到18年整顿好了再说 - 感谢@Yago - MKircher

Answer 2

今天我遇到了同样的问题。

我的解决方法是修改 `node_modules\@types\react` 文件的第 511 行，这是函数组件的接口定义，将其从原来的内容改为：

interface FunctionComponent<P = {}> {
    (props: P, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

to

interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

这只是一个临时解决方案，以便在此期间使用 framer-motion 进行工作。我们可能需要等待他们发布 bug 修复 PR。

- Klifford Agujar

Answer 3

这个解决方法对我起到了作用。

在项目根目录下创建一个名为 framer-motion.d.ts 的文件，并添加以下代码片段。

import * as React from 'react';

declare module 'framer-motion' {
  export interface AnimatePresenceProps {
    children?: React.ReactNode;
  }
}

- Tittoh

---

这样做会引起各种其他问题，比如 '"framer-motion"' has no exported member named 'AnimatePresence'. Did you mean 'AnimatePresenceProps'? - 有什么想法吗？ - Byron Coetsee

Answer 4

我刚刚遇到了这个问题，并通过将我的SimpleComponent的props类型声明包装在PropsWithChildren<{...}>中来解决它。

类似于这样：

function SimpleComponent(props: PropsWithChildren<{
  prop1: string;
  prop2: number;
  ...
}>) {
  return <div>...</div>;
}

- Paul Carroll