ReactJs 样式类的使用

来源：互联网发布：key软件授权工具编辑：程序博客网时间：2024/06/07 18:47

渲染标签上className={} 来设置样式类名

直接class="XX" 这样是不行的，只能用className值为js变量才行。

如有时样式类引用会动态改变，需要用React.addons.classSet() 来创建对象

参数可以是多个字符串,或对象{clasname:this.XX} 动画修改组件属性来实现是否引用类名

以下是例子：

/*className用法 *  */var Box=React.createClass({render:function(){var classname="cl1 cl2";return (    <div className={classname}>    朝秦暮楚    </div>)}});React.render(<Box></Box>,document.querySelector('#div1'));var Box1=React.createClass({getInitialState:function(){return {bool:this.props.isa}},handleboolchange:function(event){this.setState({bool:event.target.checked})},render:function(){var cx=React.addons.classSet;var clname=cx({"cl1":true,"cl2":this.state.bool});return (    <div className={clname}>    fdafdas    <input type="checkbox" checked={this.state.bool} onChange={this.handleboolchange}  />    </div>)}});React.render(<Box1 isa={false}></Box1>,document.querySelector('#div2'));var Box2=React.createClass({render:function(){var cla=React.addons.classSet('cl1','cl2')return (    <div className={cla}>    (XX,XX)    </div>)}});React.render(<Box2 ></Box2>,document.querySelector('#div3'));

0 0