[英]Using forwardRef with React.FC component
I am trying to use forwardRef with React.FC component in Typescript but Im getting the following TS error:我正在尝试在 Typescript 中将 forwardRef 与 React.FC 组件一起使用,但我收到以下 TS 错误:
const Input: React.FC<InputProps>
Argument of type 'FC<InputProps>' is not assignable to parameter of type 'ForwardRefRenderFunction<unknown, InputProps>'.
Types of property 'defaultProps' are incompatible.
Type 'Partial<InputProps> | undefined' is not assignable to type 'undefined'.
Type 'Partial<InputProps>' is not assignable to type 'undefined'.
Here is my code:这是我的代码:
import React, { forwardRef } from 'react';
import style from './CustomInput.module.css';
interface InputProps {
value: string;
onChange: (value: string) => void;
onClick: () => void;
}
const Input: React.FC<InputProps> = ({ value, onClick, onChange }, ref) => {
return (
<input
className={style.CustomInput}
type="text"
value={value}
ref={ref}
onChange={e => onChange(e.target.value)}
onClick={onClick}
/>
);
};
export default forwardRef(Input);
I tried assinging extra props for refs like this: React.FC = ({ value, onClick, onChange }: InputProps, ref: HTMLInputElement)
我尝试为这样的引用分配额外的道具: React.FC = ({ value, onClick, onChange }: InputProps, ref: HTMLInputElement)
But it doesnt seem to be solving the issue, any ideas how to fix this TS error?但它似乎并没有解决问题,有什么想法可以解决这个 TS 错误吗?
Don't use React.FC
if you don't need it.如果不需要,不要使用React.FC
。
function Input({value, onClick, onChange}: InputProps, ref) {
return (
<input
className={style.CustomInput}
type="text"
value={value}
ref={ref}
onChange={e => onChange(e.target.value)}
onClick={onClick}
/>
);
});
export default forwardRef(Input);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.