React动态改变class来切换样式

React动态改变class来切换样式

React有个库的名字叫classnames可以用来动态控制JS中class的逻辑，并且可以绑定写好的样式，以配合CSS的Hash

import style from "./RightBar.scss"; //加载写好的样式
import Classbind from "classnames/bind //加载Classname的绑定

let classNames = Classbind.bind(style);//对写好的样式进行绑定

class RightBar extends React.Component {

    render() {
        //写好class的集合和控制逻辑
        let clazz = classNames({
            root: true,
            active: this.props.active
        });

        //使用class的集合clazz
        return (
            <div className={clazz}>
                {this.props.children}
            </div>
        )
    }
}

如果觉得这样太麻烦可以简单点写

import classnames from "classnames/bind";
import style from "./Content.scss";

class Content extends React.Component {

    render() {
        //直接调用绑定省区临时变量
        let clazz = classnames.bind(style)({
            root: true,
            extend: this.props.extend,
        });
        //载入class的集合clazz
        return (
            <div className={clazz}>
                {this.props.children}
            </div>
        )
    }
}

赏

请问老板还招人么(/ω＼)

支付宝

微信