'Collapse'未定义 react/jsx-no-undef

Question

我是新来的，现在我正在尝试进行侧边栏和隐藏秀折叠菜单项。

这是函数=>

 collapsemetoggle(){
        this.setState(state => ({ collapsemeopen: !state.collapsemeopen }));
      }

 <div className="list-group list-group-flush">
          <a href="#" className="list-group-item list-group-item-action bg-light">Dashboard</a>              
          <a onClick={this.collapsemetoggle} data-toggle="collapse" className="list-group-item list-group-item-action bg-light">Collapase Me</a>
          <Collapse isOpen={this.state.collapsemeopen}>
            <div className="list-group list-group-flush">
              <a href="#" className="list-group-item list-group-item-action bg-light">Dashboard</a>                  
            </div>
          </Collapse>
        </div>
      </div>

但是为什么

'崩溃'不是定义的react/jsx-no-unnef

显示？我只是从这里引用=>

反应过渡

我正试图实现以获取侧边栏，例如=>

侧栏

其他人将ul li用于菜单列表，我正在尝试使用collapse。这是正确的方法吗？如果没有，请让我知道一个例子。

Answer 1

进口崩溃：

import {Collapse} from 'react-bootstrap'

使用Props而不是等法

 <Collapse in={this.state.open}>
      <div id="example-collapse-text">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
        labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </Collapse>

Answer 2

使用Bootstrap或任何其他UI框架时，您需要导入所使用的组件。将其放在文件的顶部，它将自动导入它。

import Collapse from 'react-bootstrap/Collapse'

顺便说一句，isOpen支柱不是倒塌道具。您应该使用in

<Collapse in={this.state.collapsemeopen}>