首页 文章

ReactJS将动态类添加到手动类名

提问于
浏览 次
74

我需要在常规类列表中添加动态类，但不知道如何（我使用的是babel），如下所示：

<div className="wrapper searchDiv {this.state.something}">
...
</div>

有任何想法吗？

谢谢

css reactjs

5 回答

  • 13

    你可以这样做，普通的javascript：

    className={'wrapper searchDiv ' + this.state.something}

    或字符串模板版本

    className={wrapper searchDiv $} 带反叛 .

    这两种类型当然只是javascript，但第一种模式是传统类型 . 无论如何，在JSX中，用大括号括起来的任何东西都是以javascript的形式执行的，所以你基本上可以做任何你想做的事 . 但是将JSX字符串和大括号组合在一起是一个禁忌的属性 .

    回复于
  • 0

    根据您在项目增长时需要添加的动态类的数量，可能值得在GitHub上查看JedWatson的classnames实用程序 . 它允许您将条件类表示为对象，并返回评估为true的那些 .

    以此作为其React文档的一个例子：

    render () {

var btnClass = classNames({
  'btn': true,
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

return <button className={btnClass}>I'm a button!</button>;

}

    由于React在状态更改时触发重新呈现，因此您的动态类名称会自然处理并与组件的状态保持同步 .

    回复于
  • 2

    一个简单的可能语法是：

    <div className={`wrapper searchDiv ${this.state.something}`}>
    回复于
  • 127

    这是Dynamic className的最佳选项，只需像在Javascript中那样进行一些连接 .

    className={
        "badge " +
        (this.state.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }
    回复于
  • 36

    您可以使用this npm包 . 它处理所有内容，并具有基于变量或函数的静态和动态类的选项 .

    // Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />
    回复于

相关问题