理解：警告：函数组件不能被赋予 refs

Question

我知道 refs 用于直接访问 DOM 元素而不改变状态。我读到无法为函数组件提供引用，因为它们没有状态。

Refs cannot be attached to function components. Although, we can define refs and attach them to either DOM elements or class components. The bottom line is — function components do not have instances so you can’t reference them.

取自：https://blog.logrocket.com/cleaning-up-the-dom-with-forwardref-in-react/

还是没看懂

我正在使用 Ant Design (https://ant.design/components/tooltip/) 中的 Tooltip 组件、Button 组件和自定义 CircleButton 组件。

给定以下 JSX：

<Tooltip placement="left" title={"Lock slot"}>
  <CircleButton onClick={() => execute(client.close)} icon={<LockOutlined />} disabled={loading} />
</Tooltip>

还有我的 CircleButton 组件。 这样使用，会产生警告。

const CircleButton = (props) => // gives the warning
  <Button shape="circle" size="small" style={{ marginRight: "8px" }} {...props} />

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

请注意，尽管有警告，但一切都按预期工作。

如果我按如下方式编辑它，它会正常工作，为什么？

const CircleButton = forwardRef((props, ref) => // doesn't give the warning
  <div ref={ref}>
    <Button shape="circle" size="small" style={{ marginRight: "8px" }} {...props} />
  </div>)

div组件有状态吗？我不明白。 forwardRef 是否在施展魔法并为 div 元素创建状态？

为什么如果我将 ref 传递给 Button 组件它仍然给出警告？

const CircleButton = forwardRef((props, ref) => // gives the warning
  <Button ref={ref} shape="circle" size="small" style={{ marginRight: "8px" }} {...props} />)

如果我小时候直接通过 antd Button，它就可以了。但这是因为我认为 antd 按钮有一个状态，因此它可以有 refs。

<Tooltip placement="left" title={"Lock slot"}> // doesn't give the warning
  <Button shape="circle" size="small" style={{ marginRight: "8px" }} />
</Tooltip>

Answer 1

不要混淆，首先，这与功能或 class 组件问题无关，这意味着您可以对两者都使用 ref，react 16+ 具有钩子 useRef，因此您可以将 ref 用于功能组件，

回答你的问题，antd Button 有它们的 own ref 所以它省略了在你的情况下父组件传递的 ref Tooltip 这就是为什么你没有看到对此有任何警告，但是当您使用自己的组件时，您必须接受 Tooltip 传递的 ref。

而且，你仍然不想使用 React.forwordRef 然后在将 props 传递给你的组件时简单地忽略它。但是你不会获得 antd 受控组件

提供的某些功能的特权

Answer 2

作为警告状态，您不能在不使用 forwardRef

的情况下将 refs 分配给功能组件

为了访问任何组件的引用，需要创建组件的实例并且只为class个组件创建实例，同时调用功能组件或称为

从 v16.8.0 开始，React 引入了一个名为 useRef 的 API，它允许您在功能组件中创建引用，它可以在 HTML 节点、class 组件或功能组件上使用用 forwardRef

包装的组件

要使用 ref 实现 class 组件中可用的相同行为，您可以使用 forwardRef 和 useImperativeHandle 挂钩将功能组件中的某些功能或状态公开给父级

const CircleButton = forwardRef((props, ref) => {
  const someFunction = () =>{}
  useImperativeHandle(ref, () => ({
     someFunc
  }));

  return (
    <div>
        <Button shape="circle" size="small" style={{ marginRight: "8px" }} {...props} />
   </div>

  )
}

理解：警告：函数组件不能被赋予 refs

Understanding: Warning: Function components cannot be given refs

javascript

ref

reactjs

react-forwardref