2

我正在react-hook-form从版本 6.x 升级到 7.x，并且说明说Component as用render道具替换 。

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

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

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并且尽我所能，我无法弄清楚在哪里或如何解决它。

4

0 回答 0