当孩子组件调用方法时，父ref为null -reactjs

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组件是渲染的，我可以不愿意。这是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：//i.stack.imgur.com/fr0ti.jpg

所以我的问题是：如何从子组件调用该函数时定义父母refs（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设置视频的视频？因此，在视频类的组成部分中，将偏视值传递给了父组件，在caseheader videocomponentdidmount中，该值使用该值来设置状态。然后通过拨打this.state.offsetheight？