我如何从 React 中的另一个组件打开模态框

Question

我在组件 A 中有一个模态，我想通过单击组件 B 中的按钮来显示该模态。

我使用了 ref 关键字，但它不适用于此控制台错误

“TypeError：无法解构‘object null’的属性‘toggleModal’，因为它是 null。”

A.js:

export class LoginForm extends Component{
constructor(props){
    super(props);
    this.state ={
        isModalOpen: false
    }
    this.toggleModal = this.toggleModal.bind(this);
};

toggleModal(){
    this.setState({
    isModalOpen: !this.state.isModalOpen
    })
};

render(){
    return(
        <Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
            <ModalHeader toggle={this.toggleModal}>Login</ModalHeader>

            <ModalBody>
                ...
            </ModalBody>
        </Modal>
    )
}

B.js：

import { LoginForm } from './FormsComponent';

        class Header extends Component{
        constructor(props){
        super(props);
        };
    
      loginModalRef = ({toggleModal}) =>{
        this.showModal = toggleModal;
      };
      onLoginClick = () =>{
        this.showModal();
      }
      render(){
        return(
              <Nav className="ml-auto" navbar onClick={this.onLoginClick}>
                  <NavItem>
                     <Button outline color="primary">
                        <span className="fa fa-sign-in fa-lg"> Login</span>
                     </Button>
                  </NavItem>
               </Nav>
    
             <LoginForm ref={this.loginModalRef} />
    
        )}}

更新问题：这种方式非常适合我，我发现错误消息是由于我的代码中的另一个问题引起的。 所以伙计们，如果您想做同样的事情，可以将其作为解决方案。

Answer 1

使用 state 管理是一个很好的做法，否则 refs 可以帮助您，您可以访问组件 A 的功能到组件 B。

Answer 2

您可以将 state “向上”移动到包含 LoginForm 和 Header 的父组件。 并将回调和 state 传递给两个组件

    class Parent {
    state = { modalOpen: false }
    openModal = ()=> setState({modalOpen: true})
render(){
return <div>
    <Header onClick={openModal} />
    <LoginForm modalOpen={modalOpen} />
</div>
}
}

Answer 3

为了处理来自孩子的模态 state，我使用了这个解决方案https://stackoverflow.com/a/71464748/1770571它适用于我