我是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
吗?我只是从这里引用=>
我正在尝试获得=>
这样的侧边栏其他人将ul li
用于菜单列表,而我正尝试使用collapse
。这是正确的方法吗?如果没有,请举个例子告诉我。
答案 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>