React Hook Form 中外部 UI 库的引用问题答案

【问题标题】：Reference problem with external UI library in React Hook FormReact Hook Form 中外部 UI 库的引用问题
【发布时间】：2021-12-31 02:05:27
【问题描述】：

我正在使用 ReactSelect 组件，但是，我创建了一个名为 Select 的组件，ReactSelect 就在其中：

interface IProps extends ISelectProps {
    tabIndex: string;
    required: boolean;
    isClearable: boolean;
    isDisabled: boolean;
    placeholder: string;
    options: {
        label: string;
        value: string;
    }[];
}

const Select = ({ ...props }: IProps) => <ReactSelect {...props} />;

export default Select

;

错误如下：

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Controller`.
    at Select

代码如下：

<form onSubmit={handleSubmit(onSubmit)} noValidate autoComplete='off'>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                    {API.map(({ id, order, htmlControl }) => (
                        <Controller
                            key={id}
                            name={id}
                            control={control}
                            render={({ field, fieldState: { error } }) => (
                                <>
                                    {htmlControl.type === 'PARAMETER_TYPE_SELECT' && (
                                        <Select
                                            {...field}
                                            isClearable={true}
                                            error={!!error}
                                            tabIndex={order.toString()}
                                            required={htmlControl.isRequired}
                                            isDisabled={htmlControl.isDisabled}
                                            placeholder={htmlControl.placeholder}
                                            options={htmlControl.options}
                                        />
                                    )}

                                    {htmlControl.type !== 'PARAMETER_TYPE_SELECT' && (
                                        <input
                                            required={htmlControl.isRequired}
                                            disabled={htmlControl.isDisabled}
                                            placeholder={htmlControl.placeholder}
                                        />
                                    )}
                                </>
                            )}
                        />
                    ))}
                </div>

                <input type='submit' />
            </form>

我跟官方文档一模一样，我不明白为什么它不能得到参考。

【问题讨论】：

标签： react-select react-hook-form

【解决方案1】：

当您阅读警告时，它表示您正在尝试将 ref 属性分配给不正确的功能组件，您不应在功能组件上使用 ref 属性，因为它们没有实例。要解决您的问题，您可以使用 React.forwardRef 定义您的 Select 组件，如下所示：

const Select = React.forwardRef(({ ...props }, ref) => (
  <ReactSelect {...props} ref={ref} />
));

【讨论】：