14

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

Refs 不能附加到函数组件上。虽然，我们可以定义 refs 并将它们附加到 DOM 元素或类组件。底线是——函数组件没有实例，所以你不能引用它们。

取自：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} />

警告：不能给函数组件提供参考。尝试访问此 ref 将失败。你的意思是使用 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>
4

2 回答 2

6

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

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

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

要使用 ref 实现在类组件中可用的相同行为，您可以使用forwardRefwith useImperativeHandlehook 将功能组件中的某些函数或状态公开给父级

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

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

  )
}
于 2020-04-27T06:09:15.797 回答
4

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

回答你的问题，antd Button有他们自己的 ref所以它省略了父组件传递的 ref 在你的情况下Tooltip为什么你没有看到任何警告但是当你使用你自己的组件时你必须采取refpass by Tooltip。

而且，您仍然不想使用React.forwordRef然后在将道具传递给您的组件时忽略它。但是您不会获得antd受控组件提供的某些功能的特权

于 2020-04-27T03:02:46.260 回答