React中如何设置多个className.docxVIP

第

React中如何设置多个className

目录React设置多个className方法一：ES6模板字符串``方法二：join()方法三：classnames(需要下载classnames)ReactclassName的写法模板字符串的写法formatClass的方法总结

React设置多个className

在一个元素上设置样式，有一个固定的样式，然后还有一个使用三元运算符根据条件添加的样式。

比如说有一个固定样式title:

divclassName=title标题/div

然后还要一个点击高亮的样式:

divclassName={index===this.state.activeactive:null}标题/div

不能这样写：

divclassName=titleclassName={index===this.state.activeactive:null}标题/div

方法一：ES6模板字符串``

className={`title${index===this.state.activeactive:}`}

方法二：join()

className={[title,index===this.state.activeactive:null].join()}

方法三：classnames(需要下载classnames)

constclassNames=require(classnames);

constButton=React.createClass({

?//...

?render(){

??constbtnClass=classNames({

???btn:true,

???btn-pressed:this.state.isPressed,

???btn-over:!this.state.isPressedthis.state.isHovered

??});

??returnbuttonclassName={btnClass}{this.props.label}/button

});

个人喜好第二种，一方面代码量少，另一方面方便对className数组的增加与删除。

ReactclassName的写法

本文中展示的，都是多className情况下的写法，提供的写法都是笔者个人的一些经验总结，并不一定是最标准的写法，但是符合高内聚，低耦合的工程思想。

（ps：csdn里貌似jsx的代码高亮有些问题，我就用模板字符串包住了）

模板字符串的写法

//写法一

exportdefaultclassAextendsComponent{

state={

work:true,

sabbatical:false,

render(){

return(

`div

className={`calend-item${work:off-day}${sabbaticalsabbatical:}`}

{/*...............*/}

/div`

//写法二

exportdefaultclassBextendsComponent{

state={

work:true,

sabbatical:false,

render(){

return(

`div

className={`

calend-item

${work:off-day}

${sabbaticalsabbatical:}

{/*...............*/}

/div`

写法一：模板字符串非折叠的写法，不仅代码看起来非常的恶心，而且万一少一个空格隔开，是没有错误提示的（这点是最致命的），同时最后render出的html结构中还会带来无意义的空格（见下图）。

写法二：模板字符串折叠的写法，虽然代码看起来清楚了些也不会少敲空格，但是最后render出的html结构中不仅有空格，还有换行（见下图）显然是顾此失彼。

formatClass的方法

显然模板字符串带来了很多的麻烦。

既然className本质上就是要得到一个字符串，那么我们就自己写个方法来得到目标字符串。

//写法三

exportdefaultc