zoukankan      html  css  js  c++  java
  • [React] Using the classnames library for conditional CSS

    Classnames is a simple yet versatile javascript utility that joins CSS class names based on a set of conditions. We are going to build a simple toggle switch that relies on state to determine what CSS classes will be applied.

    //className = require('classnames')
    const className = window.classNames;
    
    class ClassnamesExample extends React.Component {
    
      constructor(props) {
        super(props);
        this.state = {
          isOn: false
        };
      }
    
      toggleState = () => { this.setState({isOn: !this.state.isOn}); }
    
      render() {
    
        const circleClasses = className({
          circle: true,
          off: !this.state.isOn,
          on: this.state.isOn
        });
    
        const textClasses = className({
          textOff: !this.state.isOn
        })
    
        console.log(circleClasses);
      //    <div className="circle off"></div>
      //    <span className="textOff">{this.state.isOn ? 'ON' : 'OFF' }</span>
        return (
          <div onClick={this.toggleState}>
    
            <div className={circleClasses}></div>
            <span className={textClasses}>{this.state.isOn ? 'ON' : 'OFF' }</span>
          </div>
        );
      }
    }
    
    window.onload = () => { ReactDOM.render(<ClassnamesExample/>, document.getElementById('app')); }

     to JsBin

  • 相关阅读:
    第一行DOCTYPE 的作用
    es6 proxy、handler.get()
    vue router-link 默认a标签去除下划线
    打开记事本
    JS数组遍历的方法
    vue项目中使用proxy解决跨域
    封装axios
    postMessage vue iframe传值
    input限制只能输入数字,且保留小数后两位
    axios封装
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5642217.html
Copyright © 2011-2022 走看看