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

我使用了 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} />
    
        )}}

更新问题： 这种方式对我来说非常有效，我发现错误消息是由于我的代码中的另一个问题造成的。所以，如果你想做同样的事情，你可以把这个作为解决方案。