bounty将在6天后过期。回答此问题可获得+50的声誉奖励。ajm正在寻找来自声誉良好来源的答案。
我们正试图迁移到React18。
子属性已从React.FunctionComponent(React.FC)中移除,因此必须在组件属性中显式声明它。
但是我们希望保留旧的React.FunctionComponent的子行为。因此,我们尝试通过创建一个自定义类型定义文件index. d. ts来覆盖react类型。这样我们就不必手动更改数百个组件。
import * as React from '@types/react';
declare module 'react' {
//type PropsWithChildren<P> = P & { children?: ReactNode | undefined };
interface FunctionComponent<P = {}> {
(props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
}
}
我们有如下组件。
interface IProps {
age: number
}
const Demo: React.FunctionComponent<IProps> = ({
children,
age
}) => (
<>
{children}
{age}
</>
);
<Demo age={10}>Hi</Demo>
覆盖react类型后,我们现在在上面的演示组件中得到以下错误。
Property 'children' does not exist on type 'IProps | PropsWithChildren<IProps>'
PropsWithChildren在React 18中定义如下。
type PropsWithChildren<P> = P & { children?: ReactNode | undefined };
下面是codesandbox链接
https://codesandbox.io/s/quizzical-goodall-9d9s3j?file=/src/Demo.tsx
参考:-React 18 TypeScript children FC
有人帮忙吗?
1条答案
按热度按时间bxjv4tth1#
一般答案-您需要遵循React 18的新规则,并且您应该更改100 s文件🤷
对于这种情况,通常的解决方案是手动更新组件props接口,只在需要的地方添加
children
,但如果这对您来说太麻烦了,那么就将其添加到每个组件中:1.使用IDE全局“查找和替换”工具x1c 0d1x
1.全部更换
React.FunctionComponent<
与
React.FunctionComponent<{children?: ReactNode | undefined } &
它会把你所有的功能组件转换成: