react中多个class的props判断处理

文武双全
  • 602

clipboard.png
这里的suitdiamonds我想通过props来判断 不同的props 加不同的suitxxxx.怎么判断呢?

回复
阅读 3.6k
4 个回答
✓ 已被采纳
render(){
    var className = "";
    switch(this.props.某属性){
        case 属性1:
        className = "className1";
        break;
        ...
        default: 
        className = "className"; 
    }
    return (
        <div>
            <div className={"card " + className}> </div>
        </div>
    )
}

js 工具库 classnames
大概使用方法:

import classnames from 'classnames';
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

楼上说的很有道理,用 classnames,很好滴解决这个问题,详情请戳https://github.com/JedWatson/...

    import classnames from 'classnames';
    
    class Title extends Component {
      static propTypes = {
        className: PropTypes.string,
      };
    
      static defaultProps = {
        className: 'Title-blue',
      };
    
      render() {
        const { className } = this.props;
    
        return (
          <div className={classnames(className, style.header)}>
            Title
          </div>
        );
      }
    }
宣传栏