引用子组件

Question

我无法使用 ref 访问孩子的功能。 如果我尝试检查this.child.current，则会列出孩子的props。

class BottomPanel extends React.Component<Props, {}> {
  constructor(props) {
    super(props);
    this.child = React.createRef();
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.child.current.getAlert();
  }

  render() {
    <div>
      <BottomPanelPeriodList ref={this.child}>
        <div label={<FormattedMessage id="bottomPanel.threeMonth" />} />
        <div label={<FormattedMessage id="bottomPanel.sixMonth" />} />
      </BottomPanelPeriodList>
    </div>
  }
}
export default connect(mapStateToProps)(BottomPanel);

class BottomPanelPeriodList extends React.Component<Props, State> {
  getAlert = () => {
    alert('HELLOWORLD!');
  };

  render() {
    ...
  }
}
export default connect(null, mapDispatchToProps, null, { forwardRef: true })(BottomPanelPeriodList);

Answer 1

render() {
 retuun(  <div>
  <BottomPanelPeriodList ref={this.child}>
    <div label={<FormattedMessage id="bottomPanel.threeMonth" />} />
    <div label={<FormattedMessage id="bottomPanel.sixMonth" />} />
  </BottomPanelPeriodList>
</div>)
}

进行更改并参考此链接 https://repl.it/@KishanJaiswal/HungryAustereRelationalmodel