reactjs - NextJS 中使用 withRouter 封装组件后，如何使用 ref 访问组件？

Question

我有一个 React 组件，我将其导出如下:

class Child extends Component {
  getStatus() {
    return 'I am child!';
  }
  render() {
    return (<div>Child</div>);
  }
}

export default withRouter(Child)

我还有另一个类需要像这样的“Child”组件的引用:

class Parent extends Component {
  constructor(props) {
  super(props);
  this.childRef = createRef();
  } 

  handleLogChildStatus = () => {
    if (typeof this.childRef.current.getStatus === 'function') {
      console.log(this.childRef.current.getStatus());
    } else {
      console.log(' Can not access to child component via ref! ');
    }
  }

  render() {
  return (
    <div>
      <Child ref={this.childRef} />
      <div onClick={this.handleLogChildStatus}>Log child status</div>
    </div>
  );
  }
}

此示例显示我无法访问子组件引用，因为它由 withRouter HOC 包装。

我的问题是当子引用组件被 nextjs withRouter 包装时如何访问它>

Answer 1

我认为以下之一应该有效

export default withRouter(Child, { withRef: true })

第二个选项

 this.childComponent = React.createRef();
....
<Child wrappedComponentRef={c => (this.childComponent  = c)} />