как правильно использовать forwardRef с withRouter

Question

Я просто попытался использовать forwardRef с withRouter(mycomponent) следующим образом:

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)

если я завернул свой компонент в withRouter HOC, ссылка не будет работать, она всегда будет нулевой. Итак, как я могу использовать forwardRef с компонентом, заключенным в withRouter?

Answer 1

Перенаправление ссылок в компоненты более высокого порядка

... ссылки не пройдут. Это потому чтоrefне является опорой. подобноkey, React обрабатывает это иначе. Если вы добавите ссылку в HOC, ссылка будет ссылаться на внешний компонент контейнера, а не на завернутый компонент.

Похоже, что withRouterHOC пока не пересылает референсов. Вы можете создать свой собственный маленький HOC, чтобы также пересылать ссылку на компонент Decorated-with-router

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

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

Применение:

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} />

После быстрого поиска в Google я обнаружил эту проблему, и, судя по отметкам времени и последнему комментарию, вряд ли она будет решена. Мое вышеупомянутое решение похоже на несколько общих подходов.