如何将多个类添加到ReactJS组件

我是 ReactJS 和 JSX 的新手,我对下面的代码有一点问题。

我是 ReactJS 和 JSX 的新手,我对的代码有一点问题。

我试图在每个liclassName属性中添加多个类:

<li key={index} className={activeClass, data.class, "main-class"}></li>

我的反应组件是:

var AccountMainMenu = React.createClass({
  getInitialState: function() {
    return { focused: 0 };
  },
  clicked: function(index) {
    this.setState({ focused: index });
  },
  render: function() {
    var self = this;
    var accountMenuData = [
      {
        name: "My Account",
        icon: "icon-account"
      },
      {
        name: "Messages",
        icon: "icon-message"
      },
      {
        name: "Settings",
        icon: "icon-settings"
      }
    /*{
        name:"Help &amp; Support &nbsp; <span class='font-awesome icon-support'></span>(888) 664.6261",
        listClass:"no-mobile last help-support last"
      }*/
    ];
    return (
      <div className="acc-header-wrapper clearfix">
        <ul className="acc-btns-container">
          {accountMenuData.map(function(data, index) {
            var activeClass = "";
            if (self.state.focused == index) {
              activeClass = "active";
            }
            return (
              <li
                key={index}
                className={activeClass}
                onClick={self.clicked.bind(self, index)}
              >
                <a href="#" className={data.icon}>
                  {data.name}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
});
ReactDOM.render(<AccountMainMenu />, document.getElementById("app-container"));
586

我使用ES6template literals。例如:

const error = this.state.valid ? '' : 'error'
const cl = `form-control round-lg ${error}`

然后只是渲染它:

<input className={cl} />

单行版本:

<input className={`form-control round-lg ${this.state.valid ? '' : 'error'}`} />
294

我使用classnames当需要相当数量的逻辑来决定类(不)使用。过于简单的例子

...
    var liCl = classNames({
      'main-class': true,
      'activeClass': self.state.focused === index
    });
    return (<li className={liCl}>{data.name}</li>);
...

也就是说,如果你不想包含依赖项,那么有更好的答案。

253

只需使用 JavaScript。

<li className={[activeClass, data.klass, "main-class"].join(' ')} />

如果要在对象中添加基于类的键和值,可以使用以下内容:

function classNames(cl) {
  return Object.entries(cl)
    .filter(([key, value]) => value)
    .map(([key, value]) => key)
    .join(' ');
}
const cl = {
  'maybeClass': true,
  'otherClass': true,
  'probablyNotClass': false,
};
const myClassNames = classNames(cl);
// Output: "maybeClass otherClass"
<li className={myClassNames} />

或者更简单:

const isEnabled = true;
const isChecked = false;
<li className={[isEnabled && 'enabled', isChecked && 'checked']
  .filter(e => !!e)
  .join(' ')
} />
// Output:
// <li className={'enabled'} />
175

Concat

不需要花哨我使用 CSS 模块,这很容易

import style from '/css/style.css';
<div className={style.style1+ ' ' + style.style2} />

这将导致:

<div class="src-client-css-pages-style1-selectionItem src-client-css-pages-style2">

换句话说,这两种风格

Conditionals

这将是很容易使用相同的想法,如果的

const class1 = doIHaveSomething ? style.style1 : 'backupClass';
<div className={class1 + ' ' + style.style2} />

第六版

在过去xx年左右的时间里,我一直在使用模板文字,所以我觉得它值得一提,我发现它非常富有表现力,易于阅读:

`${class1} anotherClass ${class1}`

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(386)
Codepen:项目-CSS不工作
上一篇
如何使CSS内容斜体和粗体
下一篇

相关推荐

  • 鹿犬cp:Reactjs-@ influxdata/长颈鹿-表图不呈现

    关于鹿犬cp的问题,在giraffe table中经常遇到,我一直在尝试将giraffe的tableGraph集成到我正在构建的应用程序中,但出现以下错误:TypeError:无法读取未定义的属性(读取“数据”)…

    2022-12-21 11:46:10
    0 39 74
  • Cos jojo:如何在Cypress中为Chips(Reactjs)编写测试

    关于Cos jojo的问题,在jojo chips中经常遇到,如何在柏树中测试此代码?…

    2022-12-17 07:03:31
    0 64 46
  • css参考手册:标题

    CSS参考手册是一本关于CSS语言的参考书,由W3C组织出版,包含了CSS语言的完整语法、属性、值和案例等。它提供了一个完整的CSS语言参考,可以帮助开发者快速学习和使用CSS语言,从而更好地创建网页。…

    2023-06-29 01:40:51
    0 99 42
  • css登录界面模板代码:登录你的账号,开启新的旅程

    CSS登录界面模板代码是一种使用CSS来制作登录界面的代码,它可以帮助开发者快速制作出美观且易于使用的登录界面,以下是一个简单的CSS登录界面模板代码:…

    2023-05-06 06:17:54
    0 90 47
  • html引用css文件:My Webpage Welcome to My Webpage!

    示例示例在html文件中引用css文件,可以使用标签,代码示例如下:其中,rel属性表示关系,type属性表示文件的类型,href属性表示css文件的路径。…

    2023-06-21 12:33:03
    0 70 51
  • css鼠标移入移出:标题

    CSS鼠标移入移出,可以使用CSS中的:hover伪类来实现,代码如下:上面的代码表示,当鼠标移入.example元素时,将其文字颜色改为白色。…

    2023-04-28 12:13:20
    0 92 38
  • css自动换行:标题

    CSS自动换行可以使用CSS的word-wrap属性来实现,代码如下:该属性有两个可选值:…

    2023-11-21 11:03:53
    0 86 89
  • css布局技巧:和3个段落 标题 段落1 段落2 段落3

    CSS布局技巧是指使用CSS来实现页面布局的方法。这些技巧可以帮助开发人员快速实现页面布局,并且可以更好地控制页面的外观和行为。…

    2023-04-17 01:31:53
    0 58 21

发表评论

登录 后才能评论

评论列表(46条)