将 forwardRef 与 withRouter 一起使用的正确方法是什么 [英] what is the right way to use forwardRef with withRouter

问题描述

我只是尝试将 forwardRef 与像这样的 withRouter(mycomponent) 一起使用:

导出默认函数 App() {const childRef = useRef();const childWithRouteRef = useRef();useEffect(()=>{console.log("childWithRouteRef",childWithRouteRef);childRef.current.say();childWithRouteRef.current.say();})返回 (<div className="应用程序"><h1>Hello CodeSandbox</h1><浏览器路由器><子引用={childRef}/><ChildWithRoute_ref={childWithRouteRef}/></BrowserRouter>

);}const Child = forwardRef((props, ref) => {useImperativeHandle(ref, () => ({说:() =>{console.log("你好")},}));返回<div>子</div>})const ChildWithRoute = forwardRef((props, ref) => {useImperativeHandle(ref, () => ({说:() =>{console.log("你好")},}));返回 <div>ChildWithRoute</div>})const ChildWithRoute_ = withRouter(ChildWithRoute)

如果我将组件包装在 withRouter HOC 中，则 ref 将不起作用，它始终为空.那么如何将 forwardRef 与包装在 withRouter 中的组件一起使用?

解决方案

在谷歌快速搜索后，我发现了这个问题，并基于时间戳和最后一条评论似乎不太可能得到解决.我的上述解决方案类似于共享的几种方法.

I just tried to use forwardRef with a withRouter(mycomponent) like this :

export default function App() {

  const childRef = useRef();
  const childWithRouteRef = useRef();

  useEffect(()=>{
    console.log("childWithRouteRef",childWithRouteRef);
    childRef.current.say();
    childWithRouteRef.current.say();
  })


  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <BrowserRouter>
      <Child ref={childRef}/>
      <ChildWithRoute_ ref={childWithRouteRef}/>
      </BrowserRouter>
    </div>
  );
}

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
        say: () => {
      console.log("hello")
        },
  }));

  return <div>Child</div>
})

const ChildWithRoute = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
        say: () => {
      console.log("hello")
        },
  }));

  return <div>ChildWithRoute</div>
})

const ChildWithRoute_ = withRouter(ChildWithRoute)

if I wrapped my component in a withRouter HOC, the ref will not working, it's always null. so how can I use forwardRef with a component wrapped in withRouter?

解决方案

Forwarding refs in higher order components

... refs will not get passed through. That’s because ref is not a prop. Like key, it’s handled differently by React. If you add a ref to a HOC, the ref will refer to the outermost container component, not the wrapped component.

Looks as though the withRouter HOC doesn't yet forward refs. You can create your own little HOC to also forward a ref to the decorated-with-router component

const withRouterForwardRef = Component => {
  const WithRouter = withRouter(({ forwardedRef, ...props }) => (
    <Component ref={forwardedRef} {...props} />
  ));

  return forwardRef((props, ref) => (
    <WithRouter {...props} forwardedRef={ref} />
  ));
};

Usage:

const ChildWithRoute = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    say: () => console.log("hello from child with route"),
  }));

  return <div>ChildWithRoute</div>;
})

const ChildWithRouteAndRef = withRouterForwardRef(ChildWithRoute);

...
<ChildWithRouteAndRef ref={childWithRouteRef} />

After a quick google search I found this issue, and based on the timestamps and last comment seems unlikely to be resolved. My above solution is similar to several approaches shared.

这篇关于将 forwardRef 与 withRouter 一起使用的正确方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！