Codesandbox here
我尝试使用父组件的ref来侦听子组件中的某些ref事件,其中ref使用React.forwardRef
附加到子组件。然而,当我引用ref.current
时,我在子组件中收到了一个linting投诉,声明:
属性“current”在类型“Ref”上不存在。属性“current”在类型“(instance:HTMLDivElement)=〉void'
如何在React.forwardRef
组件中引用ref?谢谢。
index.tsx:
import * as React from "react";
import ReactDOM from "react-dom";
const Component = React.forwardRef<HTMLDivElement>((props, ref) => {
React.useEffect(() => {
const node = ref.current;
const listen = (): void => console.log("foo");
if (node) {
node.addEventListener("mouseover", listen);
}
return () => {
node.removeEventListener("mouseover", listen);
};
}, [ref]);
return <div ref={ref}>Hello World</div>;
});
export default Component;
const App: React.FC = () => {
const sampleRef = React.useRef<HTMLDivElement>(null);
return <Component ref={sampleRef} />;
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
4条答案
按热度按时间hjqgdpho1#
Refs不一定是具有
current
属性的对象。它们也可以是函数。因此类型错误指出,您可能会传入后者之一。您需要编写代码,以便它可以与两种变体一起工作。这可能有点棘手,但它是可行的。我们的效果不能附带在传入的函数上,因为该函数可以执行任何操作,并且没有考虑我们的useEffect。因此我们需要创建自己的ref,我称之为myRef。
在这一点上,现在有两个参考:传入的一个,以及我们创建的本地的一个。为了填充它们,我们需要自己使用refs的函数形式,并且在该函数中,我们可以将div元素分配给两个refs:
klsxnrf12#
我四处搜索,因为这是另一个钩子(如
useForwardRef
)的一个很好的候选对象。我自己也试过,效果很好。
当然,这本质上与初始答案中的代码相同,只是写成了一个钩子。
**注意:**钩子的名字是有争议的,可以叫
useCopyRef
,useBorrowRef
什么的。这里为了简单起见,因为它是为了forwardRef
而创建的,所以我们命名为useForwardRef
,但实际上它与转发无关。ukxgm1gy3#
详细阐述@Nicholas回答:
cdmah0mi4#
我们也可以这样做。首先创建一个这样的实用程序:
并像这样使用它:
来源及更多信息:Reusing the
ref
fromforwardRef
with React hooks