React ref 回调模式在 Parent componentDidMount() 中返回未定义

Question

所以我尝试使用此处解释的 ref 回调模式：https://facebook.github.io/react/docs/refs-and-the-dom.html，但在 Parent 的 componentDidMount 方法中继续未定义

const Child = ({ createFormHeight, getChildRef }) => (
  <CreateForm createFormHeight={createFormHeight}>
    // getting reference from here
    <div ref={getChildRef}>
      // form markup here
    </div>
  </CreateForm>
);

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      createFormHeight: '',
    }
  }

  componentDidMount() {
    const createFormHeight = this.formWrapper.offsetHeight; // returns 
error that this.formWrapper is undefined
    this.setFormHeight(createFormHeight);
  }

  getChildRef = (el) => {
    // if I console.log(el) it returns the div here
    this.formWrapper = el;
  }

  setFormHeight = (height) => {
    this.setState(() => ({ createFormHeight: height }));
  };

  render() {
    const { createIsOpen, createFormHeight } = this.state;
    return (
      <CreateMember createFormHeight={createFormHeight} getChildRef=
{this.getChildRef} />
    );
  }
}

Answer 1

我想问题是您没有将 getChildRef 安装到上下文中。尝试将this.getChildRef = tihs.getChildRef.bind(this) 添加到Parent的构造函数中。