警告：在 React 中使用 forwardRef 不能给函数组件提供 refs 警告

Question

我是 React 和 Hooks 的新手。我试图在我的组件中实现一个来自react-datepicker 的日期选择器，它带有一个预先确定的输入元素，但我想用 FontAwesome 的图标来更改它，所以我使用了他的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}/>}
        />
      );
    };

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

Answer 1

您应该将您从React.forwardRef 的第二个参数中获得的引用传递给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传递给类组件时，它返回了类实例，但在功能组件中，除非你使用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 = ... 移到组件之外，因为现在您在每次渲染时都重新创建组件本身，这会导致问题。