gpt4 book ai didi

reactjs - 不能给函数组件警告 - 即使将 forwardRef() 与样式组件一起使用

转载 作者:行者123 更新时间:2023-12-04 11:52:06 26 4
gpt4 key购买 nike

我收到警告 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? .我很困惑,因为我正在使用 forwardRef() ...它正在工作。

我正在尝试将我的自定义输入元素传递给 ReactDatePicker。有几个关于此的 GitHub 问题,例如 one .但是我无法在执行那里的示例时解决最后一个错误。

这是自定义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>
</>
);
};

这是发生错误的带有 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>
</>
);
};

最佳答案

您已经创建了两个组件,Input , 和 CustomInput .后者是使用 forwardRef 实现的,因此您可以将 ref 传递给它。前者不是,因此将 ref 传递给它是一个错误。在我看来 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} />}
/>

关于reactjs - 不能给函数组件警告 - 即使将 forwardRef() 与样式组件一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58574298/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com