我如何从 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 的父组件。并将回调和状态传递给两个组件

    class Parent {

    state = { modalOpen: false }

    openModal = ()=> setState({modalOpen: true})

render(){

return <div>

    <Header onClick={openModal} />

    <LoginForm modalOpen={modalOpen} />

</div>

}

}