javascript - 通过React Router的withRouter HOC转发引用

我想集中精力于withRouter包装的组件。但是，当我给组件提供引用时，会收到有关将引用分配给无状态组件的警告。我假设这是因为ref是附加到withRouter HOC而不是我的组件的，因为它是有状态的。我的常规设置如下所示:

// InnerComponent.js

class InnerComponent extends Component {
   constructor(props) {
      super(props);
   }
}

export default withRouter(InnerComponent);

// App.js

class App extends Component {
   constructor(props) {
      super(props);
      this.myRef = React.createRef();
   }

render() {
    return (
       <Router>
           <InnerComponent ref={this.myRef}>
       </Router>
    );
}

我看到这个问题以前曾被问过，但从未得到回答。我是React的新手，如果我遗漏了一些明显的东西，请原谅我。提前致谢。

编辑:我相当确定我需要的是:https://reacttraining.com/react-router/web/api/withRouter，在withRouter文档的wrappedComponentRef部分中，但我不知道如何实现。

最佳答案

基于@Ranjith Kumar的答案，我想出了以下解决方案:

短一些/简单一些(不需要类组件或withRef选项)

在测试和开发工具中的表现更好

const withRouterAndRef = Wrapped => {
  const WithRouter = withRouter(({ forwardRef, ...otherProps }) => (
    <Wrapped ref={forwardRef} {...otherProps} />
  ))
  const WithRouterAndRef = React.forwardRef((props, ref) => (
    <WithRouter {...props} forwardRef={ref} />
  ))
  const name = Wrapped.displayName || Wrapped.name
  WithRouterAndRef.displayName = `withRouterAndRef(${name})`
  return WithRouterAndRef
}

用法是相同的:

// Before
export default withRouter(MyComponent)
// After
export default withRouterAndRef(MyComponent)

关于javascript - 通过React Router的withRouter HOC转发引用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52097564/