Open youngwind opened 8 years ago
在组件开发的时候我们常常会碰到类似这样的情况:满足某个特定条件的时候给某元素添加上一个类,否则不添加。之前一直用的方法是这样的:
render:function () { var demoClassName = "wrap"; if (this.props.active) { demoClassName += " active"; } return ( <div className={demoClassName}></div> ) }
抛却局部css的概念不说,这样子写的代码好搓啊!肯定有更好的解决方案,后来我在这里找到了答案。大概的样子是这样的。
render: function() { var cx = React.addons.classSet; var demoClassName = cx({ 'wrap': true, 'active': this.props.active, }); // same final string, but much cleaner return <div className={demoClassName}></div>; }
不过应该存在将局部css和这种动态加载类名结合起来的方法,以后有时间要研究一下。
主流方案是用 classnames 这个库吧。
前言
在组件开发的时候我们常常会碰到类似这样的情况:满足某个特定条件的时候给某元素添加上一个类,否则不添加。之前一直用的方法是这样的:
抛却局部css的概念不说,这样子写的代码好搓啊!肯定有更好的解决方案,后来我在这里找到了答案。大概的样子是这样的。
不过应该存在将局部css和这种动态加载类名结合起来的方法,以后有时间要研究一下。