在 React 中切换类
[英] Toggle Class in React
本文介绍了在 React 中切换类的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在为一个有菜单按钮的项目使用 React.
<a ref="btn" href="#" className="btn-menu show-on-small"><i></i></a>
还有一个 Sidenav 组件,例如:
我编写了以下代码来切换菜单:
class Header extends React.Component {构造函数(道具){超级(道具);this.toggleSidenav = this.toggleSidenav.bind(this);}使成为() {返回 (<div className="header"><i className="border hide-on-small-and-down"></i><div className="容器"><a ref="btn" href="#" className="btn-menu show-on-small"><i></i></a><Menu className="menu hide-on-small-and-down"/><Sidenav/>
)}切换Sidenav() {this.refs.btn.classList.toggle('btn-menu-open');}componentDidMount() {this.refs.btn.addEventListener('click', this.toggleSidenav);}componentWillUnmount() {this.refs.btn.removeEventListener('click', this.toggleSidenav);}}
问题是 this.refs.sidenav
不是 DOM 元素,我无法在他身上添加类.
有人可以解释我如何像在按钮上那样在 Sidenav
组件上切换类吗?
解决方案
如果你想让 React 正确高效地渲染你的 DOM,你必须使用组件的 State 来更新组件参数,比如 Class Name.
更新:我更新了示例以在单击按钮时切换侧边菜单.这不是必需的,但您可以看到它是如何工作的.正如我所展示的,您可能需要使用this.state"与this.props".我习惯于使用 Redux 组件.
构造函数(道具){超级(道具);}getInitialState(){返回{showHideSidenav":隐藏"};}使成为() {返回 (<div className="header"><i className="border hide-on-small-and-down"></i><div className="容器"><a ref="btn" onClick={this.toggleSidenav.bind(this)} href="#" className="btn-menu show-on-small"><i></i></a><Menu className="menu hide-on-small-and-down"/><Sidenav className={this.props.showHideSidenav}/>
)}切换Sidenav() {var css = (this.props.showHideSidenav === "隐藏") ?显示":隐藏";this.setState({"showHideSidenav":css});}
现在,当您切换状态时,组件将更新并更改 sidenav 组件的类名.您可以使用 CSS 来显示/隐藏使用类名称的 sidenav.
.hidden {显示:无;}.表演{显示:块;}
I'm using react for a project where I have a menu button.
<a ref="btn" href="#" className="btn-menu show-on-small"><i></i></a>
And a Sidenav component like:
<Sidenav ref="menu" />
And I wrote the following code to toggle the menu:
class Header extends React.Component {
constructor(props){
super(props);
this.toggleSidenav = this.toggleSidenav.bind(this);
}
render() {
return (
<div className="header">
<i className="border hide-on-small-and-down"></i>
<div className="container">
<a ref="btn" href="#" className="btn-menu show-on-small"><i></i></a>
<Menu className="menu hide-on-small-and-down"/>
<Sidenav />
</div>
</div>
)
}
toggleSidenav() {
this.refs.btn.classList.toggle('btn-menu-open');
}
componentDidMount() {
this.refs.btn.addEventListener('click', this.toggleSidenav);
}
componentWillUnmount() {
this.refs.btn.removeEventListener('click', this.toggleSidenav);
}
}
The thing is that this.refs.sidenav
is not a DOM element and I cant add a class on him.
Can someone explain me how to toggle class on the Sidenav
component like I do on my button?
解决方案
You have to use the component's State to update component parameters such as Class Name if you want React to render your DOM correctly and efficiently.
UPDATE: I updated the example to toggle the Sidemenu on a button click. This is not necessary, but you can see how it would work. You might need to use "this.state" vs. "this.props" as I have shown. I'm used to working with Redux components.
constructor(props){
super(props);
}
getInitialState(){
return {"showHideSidenav":"hidden"};
}
render() {
return (
<div className="header">
<i className="border hide-on-small-and-down"></i>
<div className="container">
<a ref="btn" onClick={this.toggleSidenav.bind(this)} href="#" className="btn-menu show-on-small"><i></i></a>
<Menu className="menu hide-on-small-and-down"/>
<Sidenav className={this.props.showHideSidenav}/>
</div>
</div>
)
}
toggleSidenav() {
var css = (this.props.showHideSidenav === "hidden") ? "show" : "hidden";
this.setState({"showHideSidenav":css});
}
Now, when you toggle the state, the component will update and change the class name of the sidenav component. You can use CSS to show/hide the sidenav using the class names.
.hidden {
display:none;
}
.show{
display:block;
}
这篇关于在 React 中切换类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!