未定义'折叠'react / jsx-no-undef

时间:2019-06-28 09:19:40

标签: reactjs sidebar collapse react-bootstrap

我是React的新手,现在我试图做侧边栏并隐藏显示折叠菜单项。

这是function =>

 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-undef

显示

吗?我只是从这里引用=>

React Transition

我正在尝试获得=>

这样的侧边栏

Sidebar

其他人将ul li用于菜单列表,而我正尝试使用collapse。这是正确的方法吗?如果没有,请举个例子告诉我。

2 个答案:

答案 0 :(得分:1)

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

import Collapse from 'react-bootstrap/Collapse'

顺便说一句,isOpen道具不是Collapse道具。您应该使用in

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

答案 1 :(得分:1)

导入折叠:

import {Collapse} from 'react-bootstrap'

使用道具代替isOpen

 <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>