类型＆＃x27; {儿童：元素; }＆＃x27;与类型＆＃x27; intinsicattributes＆amp;没有共同的属性。 AnimatePresenceProps＆＃x27; .ts（2559）

Question

此错误刚刚开始随机发生：

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

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

此问题也不会发生在用于打字稿的codesandbox上，这让我认为这是我的特定问题机器。

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

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

Answer 1

这是最近由 此 PR 在 React v18 类型上引起的错误。其他人也遇到了同样的问题，更新后一切都崩溃了，请参阅此处打开的最近问题。我的建议是降级反应类型，直到他们为此发布修补程序。另请参阅此问题

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;
}

只是一个临时修复，以便能够同时使用框架运动。我们可能必须等到他们发布错误修复 PR。

Answer 3

这个解决方法为我解决了这个问题。

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

import * as React from 'react';

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

Answer 4

新版本的React 18，社区将儿童视为FC类型的默认道具。使用此代码来解决问题。

Your Code:
  export const ContextClass: React.FC = ({children}) => {}

Solution:
  export const ContextClass = ({children}: {children: React.ReactNode}) => {}

Answer 5

我只是遇到了这个问题，并通过包装我的simperecomponent在propswithChildren＆lt; {...}＆gt;中解决了它的修复

。

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

Answer 6

将具有同一名称的组件重新列为例如使用Framer-Motion，然后让VS代码使用该组件。如下：

import {
     AnimatePresenceProps,
     AnimatePresence as _AnimatePresence
} from "framer-motion";

export const AnimatePresence = (
    p: AnimatePresenceProps & {
        children: React.ReactNode;
    }
) => {
    return <_AnimatePresence {...p} />;
};