Question

我收到警告getISS().then(({ latitude, longitude }) => { getGeoLocation(latitude, longitude); });。我很困惑，因为我正在使用Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? ...并且可以正常工作。

我正在尝试将我的自定义输入元素传递给ReactDatePicker。与此相关的一些GitHub问题，例如one。但是，在在那里实现示例时，我无法解决最后一个错误。

这是自定义forwardRef()元素：

Input

这是发生错误的带有ReactDatePicker的自定义DatePicker：

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>
    </>
  );
};

Answer 1

您已经创建了两个组件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} />}
/>

Answer 2

我要做的只是使用 non-React 名称作为ref道具，然后将其重新映射到ref内的组件中。我喜欢使用xref，所以只要我在代码中看到它，我就会确切知道它的用途：

const CustomInput = (inputProps, xref) => (
  <Input {...inputProps} ref={xref} /> // <-- error occurs here, no more!
)

  return (
    <>
      <StyledDatePicker
        {...props}
        customInput={<CustomInput xref={ref} />}
      ></StyledDatePicker>
    </>
  )
}

即使将forwardRef（）与带样式的组件一起使用，也不能给函数组件提供警告-refs

2 个答案: