javascript - 了解: Warning: Function components cannot be given 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/

我还是不明白。

我正在使用 Tooltip来自 Ant Design ( https://ant.design/components/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直接作为一个 child ，它的工作原理。但这是因为我认为 antd 按钮有一个状态，因此它可以有 refs。

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

Answer 1

作为警告状态，您不能在不使用 forwardRef 的情况下将引用分配给功能组件

为了能够访问任何组件的 refs，它要求创建组件的实例，并且只为类组件创建实例，而调用或调用功能组件

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

要实现与 ref 类组件中可用的相同行为，您可以使用 forwardRef与 useImperativeHandle钩子(Hook)将功能组件中的某些功能或状态暴露给父级

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

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

  )
}