警告：在使用 forwardRef 的 React 中，函数组件无法得到 refs 警告

Question

我是 React 和 Hooks 的新手。我试图从 react-datepicker into my component, and it comes with a predetermined input element but I wanted to change it with an icon from FontAwesome so I used his custom-input 为它实现一个日期选择器。

这是代码

  const Task = () => {
      const [startDate, setStartDate] = useState(new Date());
      const IconInput = forwardRef(
        ({ value, onClick }, ref) => (
          <FontAwesome icon={faCalendarAlt} className="example-custom-input" onClick={onClick} ref={ref}>
            {value}
          </FontAwesome>
        ),
      );
      return (
        <DatePicker
          selected={startDate}
          onChange={date => setStartDate(date)}
          customInput={<IconInput/>}
        />
      );
    };

代码正在运行，输入已更改为来自 FontAwesome 的图标，但问题是我在控制台中收到 warning。

这是怎么回事？

我也找到了这个解决方案，但我不知道效果如何。

  const Task = () => {
      const [startDate, setStartDate] = useState(new Date());

      const ref = createRef();

      const IconInput = forwardRef(
        ({ value, onClick }, ref) => (
          <FontAwesome icon={faCalendarAlt} className="example-custom-input" onClick={onClick}>
            {value}
          </FontAwesome>
        ),
      );
      return (
        <DatePicker
          selected={startDate}
          onChange={date => setStartDate(date)}
          customInput={<IconInput ref={ref}/>}
        />
      );
    };

我添加了 ref 变量 returns createRef() 并放入 <IconInput/> 这个 ref={ref} 然后从里面删除 ref forwardRef()。这不会给我任何警告...但这是如何工作的？

Answer 1

您应该将从 React.forwardRef 的第二个参数获得的 ref 传递给 FontAwesome 组件。问题是 font awesome 库没有 ref 属性，它有 forwardedRef。

const IconInput = forwardRef(
    ({ value, onClick }, ref) => (
        <FontAwesome icon={faCalendarAlt} className="example-custom-input" onClick={onClick} forwardedRef={ref}>
            {value}
        </FontAwesome>
    ),
);

你得到错误的原因是当你将 ref 传递给 class 组件时，它返回了 class 实例，但在功能组件中，它没有任何意义，除非你使用 forwardRef .为了帮助开发人员，React 在这些情况下会在控制台中显示警告（将 ref 传递给不使用 forwardRef 的功能组件）。当您将 ref 传递给 FontAwesome（一个不使用 forwardRef 的功能组件）时，它会向您显示此错误。当您删除 ref 时，它会删除错误，但如果您仔细观察，您从 IconInput 获得的 ref 是空的。

另外，在功能组件中你应该使用 useRef() 而不是 createRef，像这样：

const ref = useRef();

return (
    <DatePicker
        selected={startDate}
        onChange={date => setStartDate(date)}
        customInput={<IconInput ref={ref}/>}
    />
);

最后一件事 - 您应该将 const IconInput = ... 移动到组件外部，因为现在您在每次渲染时都重新创建组件本身，这会导致问题。

警告：在使用 forwardRef 的 React 中，函数组件无法得到 refs 警告

Warning: Function components cannot be given refs warning in React using forwardRef

reactjs

react-datepicker

react-hooks

use-ref