React学习笔记—类名操作

Cheriselalala 发布于2019-08-21 10:30 / 1258人阅读

摘要：抛砖引玉先实现一个点击按钮切换背景的功能先。默认背景色是红色，点击按钮在红绿色之间切换。为了解决这种类似组件初始化或者动态切换的效果，提供了工具。要想使用，得先引入，可以去官网下载到。

抛砖引玉

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

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
);

效果

最后的页面效果就上面这样的，点击按钮实现了背景色的切换。回头来看看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
);

云服务器服务器托管 linux操作系统笔记本学习笔记学习笔记一基础学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85638.html

[译] 前端攻略-从路人甲到英雄无敌二：JavaScript 与不断演化的框架

摘要：一般来说，声明式编程关注于发生了啥，而命令式则同时关注与咋发生的。声明式编程可以较好地解决这个问题，刚才提到的比较麻烦的元素选择这个动作可以交托给框架或者库区处理，这样就能让开发者专注于发生了啥，这里推荐一波与。本文翻译自FreeCodeCamp的from-zero-to-front-end-hero-part。继续译者的废话，这篇文章是前端攻略-从路人甲到英雄无敌的下半部分，在...

roadtogeek 2019-08-19 18:25 评论0 收藏0
指尖前端重构（React）技术调研分析

摘要：一为什么选择是当前前端应用最广泛的框架。目前来看的生态系统要比大的多，在等最大的技术社区搜索两者，的搜索结果是的十倍左右，另外据近期统计使用的站点是的几百倍以上。其中是基于技术，依然是浏览器应用。一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化...

AlphaWallet 2019-08-23 18:18 评论0 收藏0
Java学习笔记（一）

摘要：是完全面向对象的语言，对象具有状态行为和标识。类一一是具有共同特征和行为的一类事物的统称。受保护的，对同一包内的类和所有子类可见。一种通用的内存池，用于存放所有对象。类级变量又称全局级变量或静态变量，需要使用关键字修饰。 java语言的基本特点 java语言是面向对象的高级程序设计语言，它是编译型的语言，Java语言不使用指针，并提供了自动的垃圾回收机制，使得程序员不必为内存管理而担...

chengtao1633 2019-08-14 12:02 评论0 收藏0
jQuery入门学习笔记1

摘要：首先明确是一个库，它的类型是函数，这一点可以通过查看。判断传入的参数是还是返回具体的方法函数可将所有的添加一个可将所有的变为全局声明，它是一个函数，返回一个对象，对象内有不同的方法，本文例子有个方法增加类名，修改节点内容。首先明确jQuery是一个JavaScript库，它的类型是函数，这一点可以通过typeOf查看。需要注意的是，script引入方式是本地文件引入，如果是CDN引入...

lakeside 2019-08-02 15:22 评论0 收藏0
jQuery入门学习笔记1

摘要：首先明确是一个库，它的类型是函数，这一点可以通过查看。判断传入的参数是还是返回具体的方法函数可将所有的添加一个可将所有的变为全局声明，它是一个函数，返回一个对象，对象内有不同的方法，本文例子有个方法增加类名，修改节点内容。首先明确jQuery是一个JavaScript库，它的类型是函数，这一点可以通过typeOf查看。需要注意的是，script引入方式是本地文件引入，如果是CDN引入...

davidac 2019-08-23 18:15 评论0 收藏0