输入'{ children: Element; }' 与类型 'IntrinsicAttributes & AnimatePresenceProps'.ts(2559) 没有共同的属性

Question

这个错误刚刚开始随机发生：

但是，如果我制作一个包装组件来传播 props 并引入子项，则不会出现错误：

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

这个问题也不会发生在 codesandbox for typescript 上，这让我认为这是我机器上的一个特定问题。

我尝试恢复到上一个可用版本，但它并没有解决我遇到的问题。

我应该寻找什么可能导致弹出此错误？

Answer 1

这是最近由 this PR on types of react v18. Other people are having same problems where everything breaks down after the update, see the recent issues opened here. My suggestion is to downgrade the react types until they release a hotfix for this. See also this issue

引起的错误

Answer 2

今天遇到了同样的问题。

对我有用的是改变node_modules\@types\react line: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;
}

到

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。我们可能必须等到他们发布错误修复 PR。

输入'{ children: Element; }' 与类型 'IntrinsicAttributes & AnimatePresenceProps'.ts(2559) 没有共同的属性

Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & AnimatePresenceProps'.ts(2559)

reactjs

next.js

framer-motion