我如何从 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

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

Answer 2

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

Answer 3

您可以将状态“向上”移动到同时包含 LoginForm 和 Header 的父组件。并将回调和状态传递给两个组件&nbsp; &nbsp; class Parent {&nbsp; &nbsp; state = { modalOpen: false }&nbsp; &nbsp; openModal = ()=> setState({modalOpen: true})render(){return <div>&nbsp; &nbsp; <Header onClick={openModal} />&nbsp; &nbsp; <LoginForm modalOpen={modalOpen} /></div>}}