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

【问题标题】：'Collapse' is not defined react/jsx-no-undef'Collapse' 未定义 react/jsx-no-undef
【发布时间】：2019-11-10 06:04:54
【问题描述】：

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

这里是函数=>

 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>

但是为什么

'Collapse' 没有定义 react/jsx-no-undef

显示了吗？我只是从这里参考=>

React Transition

我正在尝试获得像 =>

这样的侧边栏

Sidebar

其他人使用ul li 作为菜单列表，而我正在尝试使用collapse。这是正确的方法吗？如果没有，请告诉我一些例子。

【问题讨论】：

你能在顶部添加你的导入内容吗

标签： reactjs sidebar collapse react-bootstrap

【解决方案1】：

导入折叠：

import {Collapse} from 'react-bootstrap'

使用 props in 代替 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>

【讨论】：

【解决方案2】：

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

import Collapse from 'react-bootstrap/Collapse'

顺便说一下，isOpen 道具不是 Collapse 道具。你应该使用in

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

【讨论】：

添加后，React 无法识别 DOM 元素上的 isOpen 属性。
@Jze 因为<Collapse/> 没有 isOpen 属性。将其替换为 in 属性。
根据您的目标，您需要使用in prop 而不是isOpen