[英]Warning with function components cannot be given refs - even though using forwardRef() with Styled Components
I am receiving the warning Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
我收到警告Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
. . I'm confused because I am using forwardRef()
... and it is working.我很困惑,因为我正在使用forwardRef()
...而且它正在工作。
I'm attempting to pass my custom Input Element to ReactDatePicker.我正在尝试将我的自定义输入元素传递给 ReactDatePicker。 There are several GitHub issues on this such as this one .在这方面有几个 GitHub 问题,例如这个。 But I can't work through this last error while implementing the examples on there that work.但是在实现那里的示例时,我无法解决最后一个错误。
Here is the custom Input
element:这是自定义Input
元素:
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
ref?: React.Ref<HTMLInputElement>;
}
const StyledInput = styled.input<InputProps>`
box-sizing: border-box;
// ...
`;
export const Input: FunctionComponent<InputProps> = (props: InputProps) => {
return (
<>
<StyledInput {...props}></StyledInput>
</>
);
};
And here is the custom DatePicker with ReactDatePicker where the error occurs:这是发生错误的带有 ReactDatePicker 的自定义 DatePicker:
interface DatePickerProps extends ReactDatePickerProps {
//... custom props
}
const StyledDatePicker = styled(ReactDatePicker)`
//... some CSS
`;
const CustomInput = forwardRef<HTMLInputElement>((inputProps, ref) => (
<Input {...inputProps} ref={ref} /> // <-- error occurs here
));
export const DatePicker: FunctionComponent<DatePickerProps> = (props: DatePickerProps) => {
const ref = React.createRef<HTMLInputElement>();
return (
<>
<StyledDatePicker
{...props}
customInput={<CustomInput ref={ref} />}
></StyledDatePicker>
</>
);
};
You've created two components, Input
, and CustomInput
.您已经创建了两个组件Input
和CustomInput
。 The latter is implemented using forwardRef, so you can pass a ref into it.后者是使用 forwardRef 实现的,因此您可以将 ref 传递给它。 The former is not, so passing a ref to it is an error.前者不是,因此将 ref 传递给它是一个错误。 It looks to me like CustomInput doesn't serve any purpose, so I think what you meant to do is have just one component, which makes use of forwardRef:在我看来,CustomInput 没有任何用途,所以我认为你的意思是只有一个组件,它利用了 forwardRef:
export const Input = React.forwardRef((props: InputProps, ref: React.Ref<HtmlInputElement>) => {
return (
<>
<StyledInput {...props} ref={ref}/>
</>
)
});
// To be used like:
<StyledDatePicker
{...props}
customInput={<Input ref={ref} />}
/>
What I do is simply use a non-React name as the ref
prop, and re-map it to ref
inside then component.我所做的只是使用非 React名称作为ref
属性,然后将其重新映射到组件内部的ref
。 i like to use xref
so whenever I see it in the code, I know exactly what it's for:我喜欢使用xref
,所以每当我在代码中看到它时,我都知道它的用途:
const CustomInput = (inputProps, xref) => (
<Input {...inputProps} ref={xref} /> // <-- error occurs here, no more!
)
return (
<>
<StyledDatePicker
{...props}
customInput={<CustomInput xref={ref} />}
></StyledDatePicker>
</>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.