React学习笔记—类名操作

抛砖引玉

先实现一个点击按钮切换背景的功能先。
默认背景色是红色,点击按钮在红绿色之间切换。

index.html




    
    React
    







style.css

.content {
    width: 100px;
    height: 100px;
}

.bg-red {
    background-color: red;
}

.bg-green {
    background-color: green;
}

app.js

var DemoComponent = React.createClass({
    getInitialState: function () {
        return {isBgRed: true};
    },
    handleClick: function () {
        this.setState({isBgRed: !this.state.isBgRed});
    },
    render: function () {
        var classString = 'content';

        if (this.state.isBgRed) {
            classString = classString + ' bg-red';
        } else {
            classString = classString + ' bg-green';
        }


        return (
            

) } }); React.render( , document.body );

效果

React学习笔记—类名操作_第1张图片
最后的页面效果就上面这样的,点击按钮实现了背景色的切换。回头来看看render方法里的这一坨内容

var classString = 'content';

if (this.state.isBgRed) {
    classString = classString + ' bg-red';
} else {
    classString = classString + ' bg-green';
}

这里根据状态切换不同的class,这种代码看起来太冗长,稍微改进下

var classString = 'content' + (this.state.isBgRed ? ' bg-red' : ' bg-green');

代码看起来要舒服些,但是还有一个问题,语义太差,阅读维护起来确实不大容易。为了解决这种类似组件className初始化或者动态切换的效果,React提供了工具ClassSet。

ClassSet

要想使用ClassSet,得先引入react-with-addons.js,可以去官网下载到。直接看代码

index.html




    
    React
    








app.js

var cx = React.addons.classSet;

var DemoComponent = React.createClass({
    getInitialState: function () {
        return {isBgRed: true};
    },
    handleClick: function () {
        this.setState({isBgRed: !this.state.isBgRed});
    },
    render: function () {

        var classes = cx({
            'content': true,
            'bg-red': this.state.isBgRed,
            'bg-green': !this.state.isBgRed
        });

        return (
            

sdf

) } }); React.render( , document.body );

你可能感兴趣的:(javascript,react.js)