使用 React 的多个 CSS 条件类

Question

我想将另外 3个条件类合并到这个......

<li className={`list-group-item ${todo.completed ? " strike-through" : ""}`}

我现在想${todo.priority}被包括/与此一起，这将分配类：

“alert alert-info”、“alert alert-warning”和“alert alert-danger”基于下拉列表中的相应值：1、2、3。

有人能帮我解决这个问题吗，先谢谢了！

Answer 1

其他人已经提供了一些更“灵活”的解决方案，所以我将添加快速而肮脏的解决方案：

<li className={`list-group-item ${todo.completed ? " strike-through" : ""} ${todo.priority === 1 ? "alert alert-info" : (todo.priority === 2 ? "alert alert-warning" : "alert alert-danger")}`} />

为了可读性：

const completed = todo.completed ? " strike-through" : "";
const priority = todo.priority === 1 ? "alert alert-info" : (todo.priority === 2 ? "alert alert-warning" : "alert alert-danger");
...
<li className={`list-group-item ${completed} ${priority}`} />

Answer 2

我推荐这个classnames包。它是一个广泛使用的包并且服务于一个简单的目的。任何值为真的键都将成为最终的类名：

import cx from 'classnames';

<li className={cx('list-group-item', {
   'alert alert-danger': value === 3,
   'alert alert-info': value === 1,
   'alert alert-warning': value === 2,
   'strike-through': todo.completed,
})} />

Answer 3

您可以继续以同样的方式添加类，或者您可以使用类似的库classnames来使编写类更容易一些。

例子

import React from 'react';
import classNames from 'classnames';

class App extends React.Component {
  // ...

  render() {
    // ...

    const className = classNames({
      'list-group-item': true,
      'strike-through': todo.completed,
      'alert alert-info': todo.priority === 1,
      'alert alert-warning': todo.priority === 2,
      'alert alert-danger': todo.priority === 3,
    });
    return <li className={className}> ... </li>;
  }
}