Question

我正在将 react-hook-form 从 6.x 版升级到 7.x 版，the instructions 说用 Component 道具替换 as render。

这对我的大多数样式组件都很好，但对于我的 DatePicker，我需要传入一个 inputRef 才能使其工作。

旧代码（在react-hook-form v6下运行良好）如下

export const DatePicker = styled(
  ({ name, validation, label, control, value, onChange, disablePast, ...props }) => (
    <Row id={name} {...props}>
      <Controller
        as={forwardRef((_props, ref) => (
          <KeyboardDatePicker
            id={name}
            name={name}
            disableToolbar
            margin="dense"
            inputVariant="outlined"
            format="dd-MM-yyyy"
            label={label}
            value={value}
            onChange={onChange}
            autoOk
            inputRef={ref}
            disablePast={disablePast}
          />
        ))}
        name={name}
        control={control}
        rules={validation}
      />
    </Row>
  )
)(({ theme }) => ({
  padding: theme.spacing(0, 0, 1, 0)
}))

所以用 as 道具替换 render 看起来像

export const DatePicker = styled(
  ({ name, validation, label, control, value, onChange, disablePast, ...props }) => (
    <Row id={name} {...props}>
      <Controller
        render={({ field }) =>
          forwardRef((_props, ref) => (
            <KeyboardDatePicker
              {...field}
              id={name}
              name={name}
              disableToolbar
              margin="dense"
              inputVariant="outlined"
              format="dd-MM-yyyy"
              label={label}
              value={value}
              onChange={onChange}
              autoOk
              inputRef={ref}
              disablePast={disablePast}
            />
          ))
        }
        name={name}
        control={control}
        rules={validation}
      />
    </Row>
  )
)(({ theme }) => ({
  padding: theme.spacing(0, 0, 1, 0)
}))

但这不起作用，我收到错误

Objects are not valid as a React child (found: object with keys {$$typeof, render})

问题似乎出在我对 forwardRef 的使用上，并且尽我所能，我不知道在哪里或如何解决它。

Answer 1

您不需要使用 forwardRef，因为 render 已经提供 ref 作为 field 属性的一个属性。因此，您可以将此 ref 用于 inputRef 组件中的 KeyboardDatePicker 道具。

export const DatePicker = styled(
  ({
    name,
    validation,
    label,
    control,
    disablePast,
    ...props
  }) => (
    <div {...props}>
      <Controller
        render={({ field: { ref, ...rest } }) => (
          <KeyboardDatePicker
            {...rest}
            id={name}
            name={name}
            disableToolbar
            margin="dense"
            inputVariant="outlined"
            format="dd-MM-yyyy"
            label={label}
            autoOk
            inputRef={ref}
            disablePast={disablePast}
          />
        )}
        name={name}
        control={control}
        rules={validation}
      />
    </div>
  )
)(({ theme }) => ({
  padding: theme.spacing(0, 0, 1, 0)
}));

如何在 react-hook-form v7 的渲染道具中使用 forwardRef

1 个答案: