[英]Understanding: Warning: Function components cannot be given refs
I know that refs are used to access DOM elements directly without altering the state.我知道 refs 用于直接访问 DOM 元素,而无需更改 state。 I read that it's not possible to give refs to function components because they don't have a state.
我读到不可能给 function 组件提供参考,因为它们没有 state。
Refs cannot be attached to function components.
Refs 不能附加到 function 组件。 Although, we can define refs and attach them to either DOM elements or class components.
虽然,我们可以定义 refs 并将它们附加到 DOM 元素或 class 组件。 The bottom line is — function components do not have instances so you can't reference them.
底线是 — function 组件没有实例,因此您无法引用它们。
taken from: https://blog.logrocket.com/cleaning-up-the-dom-with-forwardref-in-react/取自: https://blog.logrocket.com/cleaning-up-the-dom-with-forwardref-in-react/
I still don't understand.我还是不明白。
I am using the Tooltip
component from Ant Design ( https://ant.design/components/tooltip/ ), the Button
component and a custom CircleButton
component.我正在使用来自 Ant Design 的
Tooltip
组件( https://ant.design/components/tooltip/ )、 Button
组件和自定义CircleButton
组件。
Given the following JSX:给定以下 JSX:
<Tooltip placement="left" title={"Lock slot"}>
<CircleButton onClick={() => execute(client.close)} icon={<LockOutlined />} disabled={loading} />
</Tooltip>
And my CircleButton component.还有我的 CircleButton 组件。 Used like this, it will generate the warning .
像这样使用,它会产生警告。
const CircleButton = (props) => // gives the warning
<Button shape="circle" size="small" style={{ marginRight: "8px" }} {...props} />
Warning: Function components cannot be given refs.
警告:不能给 Function 组件提供参考。 Attempts to access this ref will fail.
尝试访问此 ref 将失败。 Did you mean to use React.forwardRef()?
你的意思是使用 React.forwardRef() 吗?
Note that everything works as expected despite the warning.请注意,尽管有警告,但一切都按预期工作。
If I edit it as follows though, it will work fine, why?如果我按如下方式编辑它,它会正常工作,为什么?
const CircleButton = forwardRef((props, ref) => // doesn't give the warning
<div ref={ref}>
<Button shape="circle" size="small" style={{ marginRight: "8px" }} {...props} />
</div>)
Does the div
component have a state? div
组件是否有 state? I don't get it.我不明白。 Is the
forwardRef
doing some magic and creating a state for the div element? forwardRef
是否在做一些魔术并为 div 元素创建一个 state ?
Why then if I pass the ref
to the Button
component it still gives the warning?那为什么如果我将
ref
传递给Button
组件它仍然会发出警告?
const CircleButton = forwardRef((props, ref) => // gives the warning
<Button ref={ref} shape="circle" size="small" style={{ marginRight: "8px" }} {...props} />)
If I pass the antd
Button
directly as a child, it works.如果我作为孩子直接传递
antd
Button
,它就可以工作。 But this is because I suppose that the antd button has a state hence it can have refs.但这是因为我认为 antd 按钮有一个 state 因此它可以有参考。
<Tooltip placement="left" title={"Lock slot"}> // doesn't give the warning
<Button shape="circle" size="small" style={{ marginRight: "8px" }} />
</Tooltip>
As the warning state you cannot assign refs to functional component without the usage the forwardRef作为警告 state 您不能在不使用 forwardRef 的情况下将引用分配给功能组件
In order to have access to refs of any component, its required that a instance of the component is created and an instance is only created for class components, while functional components are invoked or called为了访问任何组件的 refs,它需要创建组件的实例,并且只为 class 组件创建实例,同时调用或调用功能组件
From v16.8.0 onwards React introduced an API called useRef which allows you to create refs within functional components too which can be used on HTML nodes, class components or Functional components wrapped with forwardRef从 v16.8.0 开始,React 引入了一个名为 useRef 的 API,它允许您在功能组件中创建引用,这也可以用于 HTML 节点、class 组件或用 forwardRef 组件包裹的功能组件
To achieve the same behavior that is available in class components with ref, you can use forwardRef
with useImperativeHandle
hook to expose certain functions or states within the functional component to parent要实现与 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>
)
}
Don't be confused, first this it's not related to functional or class components issue means you can use ref for both, react 16+ has hook useRef
so you can used ref for functional components also,不要混淆,首先这与功能或 class 组件问题无关,这意味着您可以将 ref 用于两者,react 16+ 具有钩子
useRef
因此您也可以将 ref 用于功能组件,
Answer to your question, antd
Button
has their own ref so it's omitting the ref passed by parent component in you case Tooltip
that why your are not seeing any warning for that but when you used your own component that time you have to take of ref
passed by Tooltip
.回答您的问题,
antd
Button
有自己的 ref ,因此它在您的情况下Tooltip
了父组件传递的ref
通过Tooltip
。
And, still you don't want to use React.forwordRef
then simply ignore it while passing props to your component.而且,您仍然不想使用
React.forwordRef
然后在将道具传递给您的组件时简单地忽略它。 but then you don't get privileged some feature provided by antd
controlled components但是你不会获得
antd
控制组件提供的某些功能的特权
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.