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>
  );
  }
}

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

我的问题是当nextjs用Router包装后，如何访问子ref组件>

Answer 1

我认为以下其中一项应该起作用

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

第二个选项

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

在NextJS中使用withRouter包装时，如何使用ref访问组件？

1 个答案: