React进修笔记—类名操纵

2019年8月26日 113次阅读 来源: 小俞

举一反三

先完成一个点击按钮切换背景的功用先。
默许背景色是赤色，点击按钮在红绿色之间切换。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<script src="js/lib/react.js"></script>
<script src="js/lib/JSXTransformer.js"></script>
<script src="js/app.js" type="text/jsx;harmony=true"></script>
</body>
</html>

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 (
            <div>
                <p className={classString}></p>
                <button onClick={this.handleClick}>toggle</button>
            </div>
        )
    }
});

React.render(
    <DemoComponent />,
    document.body
);

结果

《React进修笔记—类名操纵》
末了的页面结果就上面如许的，点击按钮完成了背景色的切换。转头来看看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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<script src="js/lib/react.js"></script>
<script src="js/lib/JSXTransformer.js"></script>
<script src="js/lib/react-with-addons.js"></script>
<script src="js/app.js" type="text/jsx;harmony=true"></script>
</body>
</html>

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 (
            <div>
                <p className={classes}>sdf</p>
                <button onClick={this.handleClick}>toggle</button>
            </div>
        )
    }
});


React.render(
    <DemoComponent />,
    document.body
);
    原文作者：小俞
    原文地址: https://segmentfault.com/a/1190000002685493
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞