Javascript I'；我在我的组件中使用react bootstrap模式，但它不会在另一个组件中通过onClick事件调用打开 我在我的组件中使用了react bootstrap模式，但它不会通过另一个组件中的onClick事件调用打开。如何解决这个问题？ 这是我的密码 从“React”导入React，{Component}； 从“../../Custom.css”导入类； 从“reactstrap”导入{Button}； //从“../../ModalCart”导入ModalCart； 从“reactstrap”导入{Button，Modal，ModalHeader，ModalBody，ModalFooter}； //导入“反应引导”； 类Navi扩展组件{`在此处输入代码` 建造师（道具）{ 超级（道具）； 此.state={ 模态：假 }; this.toggle=this.toggle.bind（this）； } 切换（）{ 这是我的国家({ 模态：！this.state.modal }); } render（）{ 返回( 包：{this.props.noItems} 小计：$；{this.props.total.toFixed（2）} {this.props.buttonLabel} ); } } 导出默认Navi； 这是调用切换按钮和我的模式退出的第二个组件----- 从“React”导入React，{Component}； 从“./ShoppingCart”导入ShoppingCart； 从“../src/Custom.css”导入类； 从“reactstrap”导入{Button，Modal，ModalHeader，ModalBody，ModalFooter}； //从“../src/Aux”导入Aux； 类ModalCart扩展了组件{ 建造师（道具）{ 超级（道具）； 此.state={ 模态：假 }; this.toggle=this.toggle.bind（this）； } 切换（）{ 这是我的国家({ 模态：！this.state.modal }); } render（）{ console.log（this.props.cart）； 返回( 购物车 取消 ); } } 导出默认ModalCart； 这两个组件都显示在这里，请检查并帮助它解决为什么不工作，谢谢…….这是一个思维卡程序，请帮助我摆脱这种状况，

我正在我的组件中使用react引导模式，但它不会通过另一个组件中的onClick事件调用打开。。。 有谁知道这件事吗？请提一下他们的帮助我解决这个问题

---

我在这里放置的所有两个组件及其代码如果我犯了任何错误，请突出显示它以解决此问题

看起来您没有导入NavbarToggler

    I'm using react bootstrap modal in my component, but it does not open by onClick event call in another component. how to resolve this problem?

    this is my code

        import React, { Component } from 'react';
        import classes from '../../Custom.css';
        import {Button} from 'reactstrap';
        //import ModalCart from '../../ModalCart';
        import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
        //import 'react-bootstrap';
        class Navi extends Component {`enter code here`
          constructor(props) {
            super(props);
            this.state = {
              modal: false
            };
            this.toggle = this.toggle.bind(this);
          }
          toggle() {
            this.setState({
              modal: !this.state.modal
            });
          }
            render() {
                return (
                    <header>
                  <div className="navbar fixed-top navbar-dark bg-primary box-shadow">
                    <div className="container d-flex justify-content-between">
                        <a href="" className="navbar-brand d-flex align-items-center">
                        <strong><i className="fas fa-tags"></i> Products</strong>
                       </a>
                      <Button color="danger" onClick={this.toggle} className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span className="glyphicon glyphicon-shopping-cart" data-toggle="modal" data-target="#exampleModal">
                          <i className="fas fa-shopping-cart"></i>
                          <span className={classes.counter}>
                            Bag : {this.props.noItems} </span>
                            <span className={classes.counter}>
                           SUBTOTAL : <span>&#36;</span> {this.props.total.toFixed(2)}
                          </span>
                        </span>
                        {this.props.buttonLabel}</Button>
                    </div>
                  </div>
                </header>
                );
            }
        }
        export default Navi;




    this is second component where to call toggle button and my modal exit there-----

   import React, { Component } from 'react';
import ShoppingCart from './ShoppingCart';
import classes from '../src/Custom.css';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
//import Aux from '../src/Aux';


class ModalCart extends Component {
    constructor(props) {
        super(props);
        this.state = {
          modal: false
        };

        this.toggle = this.toggle.bind(this);
      }

      toggle() {
        this.setState({
          modal: !this.state.modal
        });
      }
    render() {
        console.log(this.props.cart);
        return (

            <div> 
              <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
              <ModalHeader toggle={this.toggle} className={classes.modalheader}>Shopping Cart</ModalHeader>
              <ModalBody className="">
              <div className="modal-body">
                             <ShoppingCart
                                cart={this.props.cart}
                                onRemove={this.props.onRemove}
                               checkOut={this.props.checkOut}
                               tot={this.props.total}
                               />
                      </div>
              </ModalBody>
              <ModalFooter>
                <Button color="secondary" onClick={this.toggle}>Cancel</Button>
              </ModalFooter>
            </Modal>
          </div>





        );
    }
}

export default ModalCart;


Both of the component are displayed here plz check and help it out why it does not working thanks .......it is a mind stuck procedure form help me out from this condition,

在render（）中，它将如下所示

import { NavbarToggler} from reactstrap;

<NavbarToggler onClick={this.toggle} />