Question

我正在尝试从React中的子组件内的父组件调用方法。这是我父组件的代码：

import Video from 'Video/Video';

class CaseHeader extends React.Component {

  constructor(props) {
    super(props);

    // Bind functions
    this.videoComponentDidMount = this.videoComponentDidMount.bind(this);
  }

  videoComponentDidMount() {
    console.log(this.caseheader);
  }

  render() {
    let video = null;

    if (this.props.caseData.title) {
      video = <Video videoComponentDidMount={this.videoComponentDidMount} />;
    }

    return(
      <div styleName="CaseHeader" ref={caseheader => this.caseheader = caseheader}>
        {video}
      </div>
    );
  }

}

export default CaseHeader;

所以我要做的是：我的CaseHeader组件正在呈现另一个名为Video的组件。我需要等待这个组件完成渲染以获得他的高度。所以我将一个方法传递给Video，它将在componentDidMount方法中调用。调用该方法时，我知道Video组件已呈现，我可以获取其offsetHeight。这是Video组件的代码：

class Video extends React.Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.videoComponentDidMount();
  }

  render() {
    return(
      <div styleName="Video" ref={video => this.video = video}></div>
    );
  }

}

export default Video;

所以我希望console.log(this.caseheader)语句记录CaseHeader的DOM元素。问题是这不会发生，null会被记录。

当我在CaseHeader组件中添加以下代码时：

componentDidMount() {
  console.log(this.caseheader);
}

componentDidMount方法记录正确的值，但videoComponentDidMount方法不记录。这是我所说的截图：https://imgur.com/PrYRy0r

所以我的问题是：在从子组件调用函数时，如何定义父引用（在这种情况下为this.caseheader）？

提前谢谢！

修改

感谢此处的帮助，我使用CaseHeader的状态解决了这个问题。我所做的是更新构造函数并添加一个方法：

constructor(props) {
  super(props);

  // Set initial state
  this.state = {
    videoIsActive: false
  };

  // Bind functions
  this.handleStateChange = this.handleStateChange.bind(this);
}

handleStateChange(state) {
  this.setState(state);
}

所以我在这里跟踪视频是否有效。我还将handleStateChange方法传递给Video组件：

video = <Video updateParentState={this.handleStateChange} />;

在Video组件中，我添加了以下内容：

this.props.updateParentState({videoIsActive: true});

这会调用CaseHeader中的以下代码：

componentDidUpdate() {
  if (this.state.videoIsActive) {
    this.setCaseheaderBackgroundHeight();
  }
}

谢谢你们！

Answer 1

为什么不在caseHeader中使用setState设置视频的offsetHeight？因此，在Video类的componentDidMount中，将offsetHeight值传递给父Component，并在CaseHeader中将videoComponentDidMount用于设置状态。然后通过调用this.state.offsetHeight？

来访问offsetHeight属性

当子组件调用方法时，父引用为null - ReactJS

1 个答案: