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

Question

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

为什么？有什么办法可以解决这个问题吗？

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 的代码，任何人都无法确定是上述哪种情况。

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

react - reference to component passed as a prompt

reactjs

react-props

react-component