当将forwardRef与泛型一起使用时,我得到Property 'children' does not exist on type 'IntrinsicAttributes'
或Property 'ref' does not exist on type 'IntrinsicAttributes'
。
https://codesandbox.io/s/react-typescript-0dt6d?fontsize=14
上面CodeSandbox链接中的相关代码在此处复制:
interface SimpleProps<T extends string>
extends React.HTMLProps<HTMLButtonElement> {
random: T;
}
interface Props {
ref?: React.RefObject<HTMLButtonElement>;
children: React.ReactNode;
}
function WithGenericsButton<T extends string>() {
return React.forwardRef<HTMLButtonElement, Props & SimpleProps<T>>(
({ children, ...otherProps }, ref) => (
<button ref={ref} className="FancyButton" {...otherProps}>
{children}
</button>
)
);
}
() => (
<WithGenericsButton<string> ref={ref} color="green">
Click me! // Errors: Property 'children' does not exist on type 'IntrinsicAttributes'
</WithGenericsButton>
)
这里提出了一个潜在的解决方案,但不确定如何在这种情况下实现:
https://github.com/microsoft/TypeScript/pull/30215
(从https://stackoverflow.com/a/51898192/9973558找到)
最佳答案
因此,这里的主要问题是您要在渲染器中返回React.forwardRef
的结果,这对于渲染函数而言不是有效的返回类型。您需要将forwardRef结果定义为它自己的组件,然后将其呈现在WithGenericsButton高阶组件中,如下所示:
import * as React from "react";
interface SimpleProps<T extends string> {
random: T;
}
interface Props {
children: React.ReactNode;
color: string;
}
function WithGenericsButton<T extends string>(
props: Props & SimpleProps<T> & { ref: React.Ref<HTMLButtonElement> }
) {
type CombinedProps = Props & SimpleProps<T>;
const Button = React.forwardRef<HTMLButtonElement, CombinedProps>(
({ children, ...otherProps }, ref) => (
<button ref={ref} className="FancyButton" {...otherProps}>
{children}
</button>
)
);
return <Button {...props} />;
}
const App: React.FC = () => {
const ref = React.useRef<HTMLButtonElement>(null);
return (
<WithGenericsButton<string> ref={ref} color="green" random="foo">
Click me!
</WithGenericsButton>
);
};
如果将其放在沙盒或游乐场中,您会看到现在已正确键入
props
,包括random
的T
Prop 关于reactjs - forwardRef : Property 'ref' does not exist on type 'IntrinsicAttributes' 的泛型错误,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57750777/