react - 对作为提示传递的组件的引用

Question

我在我的测试组件中渲染了 EditModal 组件。我通过“this.edit”引用它。 我将 UserForm 组件作为提示传递给 EditModal。我也尝试参考它。但是“this.form”返回未定义。

为什么？有没有办法解决这个问题？

class Test extends React.Component {

   test(){
     this.form.someMethod();
   }

    render() {   
      return (
        <div>            
          <EditModal form={<UserForm ref={(form) => { this.form = form; }} />} ref={(edit) => { this.edit = edit; }}/>                        
        </div>
      );
    }
  }
export default Test;

//EditModal.js

class EditModal extends React.Component {
    constructor() {
        super();
        this.handleShow = this.handleShow.bind(this);
        this.handleClose = this.handleClose.bind(this);
        this.state = { show: false};
    }

    handleClose() {
        this.setState({ show: false });
    }

    handleShow(id) {
        this.setState({ show: true, currentId: id});
    }

  render() {
    return (
        <Modal show={this.state.show} onHide={this.handleClose}>
            <Modal.Header closeButton={false}>
            <Modal.Title>Uprav zaznam</Modal.Title>
            </Modal.Header>
        <Modal.Body>
           {this.props.form}
        </Modal.Body>
            <Modal.Footer>
            <Button onClick={this.handleClose}>Zatvorit</Button>
            </Modal.Footer>
      </Modal>
    );
  }
}

export default EditModal;

Answer 1

this.form 将在安装UserForm 组件后（可能在EditModal 内）并且仅当EditModal 不克隆表单属性并覆盖ref 时才可访问。

因此，如果this.form 未定义，则它可能尚未安装，或已卸载（在调用测试方法时）或ref 已被覆盖。

如果没有EditModal 的代码，任何人都无法确定上述哪种情况。