Question

我想将3个更多条件类纳入此...

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

我现在希望将${todo.priority}包含在此列表中/同时，这将分配课程：

“警报警报信息”， “警报警告”，和 “警告警报危险” 根据下拉列表中的相应值：1、2、3。

有人可以帮我吗，谢谢！

Answer 1

我建议使用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 2

您可以继续添加类，也可以使用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>;
  }
}

Answer 3

其他人已经提供了更多“灵活”的解决方案，因此，我将添加一个又快又脏的解决方案：

<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 4

我认为这就是您要寻找的东西

    containerView
     |          \
  [layer]   backgroundLayer
     |         (clips itself and its sublayers,
 contentView    but it has no sublayers)
     |
  [layer]

使用React的多个CSS条件类

4 个答案: