例子描述
点击隐藏按钮，粉红色正方形消失。
点击显示按钮，粉红色正方形显示。
代码举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<style>
.myspan {
display: block;
width: 100px;
height: 100px;
background-color: pink;
opacity: 1;
transition: opacity .3s linear;
}
.border {
border: 3px solid red;
}
.hidden {
opacity: 0;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script type="text/babel">
class ComClass extends React.Component {
constructor() {
super();
this.state = {
isShow: true
}
}
change() {
this.setState({
isShow: !this.state.isShow
})
}
render() {
return (
<div>
<button onClick={this.change.bind(this)}>{this.state.isShow ? '隐藏' : '显示'}</button>
<span className={[this.state.isShow ? '' : 'hidden', 'myspan'].join(' ')}></span>
</div >
)
}
}
ReactDOM.render(<ComClass />, document.querySelector("#app"));
</script>
下文仅粘贴return里的代码。
classname里渲染多个类，不加判断
写法一：
return (
<div>
<button onClick={this.change.bind(this)}>{this.state.isShow ? '隐藏' : '显示'}</button>
<span className='hidden myspan'></span>
</div >
)
写法二：
return (
<div>
<button onClick={this.change.bind(this)}>{this.state.isShow ? '隐藏' : '显示'}</button>
<span className={'hidden myspan'}></span>
</div >
)
classname里渲染多个类，一个判断
写法一：
render() {
return (
<div>
<button onClick={this.change.bind(this)}>{this.state.isShow ? '隐藏' : '显示'}</button>
<span className={[this.state.isShow ? '' : 'hidden', 'myspan'].join(' ')}></span>
</div >
)
}
写法二：
render() {
return (
<div>
<button onClick={this.change.bind(this)}>{this.state.isShow ? '隐藏' : '显示'}</button>
<span className={`myspan ${this.state.isShow ? '' : 'hidden'}`}></span>
</div >
)
}
写法三：
return (
<div>
<button onClick={this.change.bind(this)}>{this.state.isShow ? '隐藏' : '显示'}</button>
<span className={this.state.isShow ? "myspan" : "myspan hidden"}></span>
</div >
)
总结
四种方法可以实现className的判断加类。
无需第三方模块依赖：
1、ES6模板字符串——``
2、join组成字符串——Array.join('')
3、字符串——''
需要第三方依赖：
classnames——参考此文
|