如何在 React JS 中有條件地應用 CSS 類

Question

我一直在思考如何最好地在 React JS 中有條件地應用 CSS 類。 我已經看到了一些答案，但沒有多少答案，或者它們沒有我想要的那么詳盡。

Answer 1

您可以簡單地將類設置為狀態，如下所示：

<div className={ this.state.exampleIsTruthy ? 'yourClass' : '' }>
  text
</div>

或者如果你想根據這樣的狀態切換類：

<div className={ this.state.exampleTrueOrFalse ? 'shown' : 'hidden' }>
  text
</div>

Answer 2

關於操作類名的 React 文檔建議使用classnames NPM 包。

該軟件包的文檔很棒。

以下代碼段直接來自包README ：用法部分

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: false, bar: true });    // => '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'

Answer 3

許多答案都假設這是關於有條件地切換 CSS 類（如果足夠，則為三元），但是當您需要選擇性地包含類名時，這變得更加遲鈍。 帶有空假表達式的多個三元 if 是冗長的。 NPM 包可能有點多。 對於某些人來說，一個函數也可能是矯枉過正。

這就是我所做的。

const classNames = [
  "className1",
  condition1 && "className2",
  condition2 && "className3",
  condition3 && "className4",
].filter(e => e).join(" ");

截至 2021 年 6 月編輯

我注意到這個答案仍然偶爾會看到贊成票。 我想我會使用一個小而簡潔的箭頭函數提供一個稍微更新的例子：

const cls = (...classes) => classes.filter(Boolean).join(' ');

<div className={cls('mandatoryClass', condition && 'optionalClass')} />

Answer 4

如果您需要在現有類中添加條件類，這個可能會給您一個想法

<span className={'fa ' + (this.state.dropdownActive ? 'fa-angle-up' : 'fa-angle-down')}></span>

在這個例子中，我根據下拉菜單的狀態顯示了下拉菜單的箭頭圖標。 在任何情況下，我都需要保留類fa來設置跨度的字體系列，我只需要在fa-angle-up和fa-angle-down之間切換。

與模板文字相同的示例

<span className={`fa ${this.state.dropdownActive ? 'fa-angle-up' : 'fa-angle-down'}`}></span>

Answer 5

使用類名庫https://github.com/JedWatson/classnames

classNames 函數接受任意數量的參數，這些參數可以是字符串或對象。 如果鍵的值是假的，它將不會包含在輸出中。

var classNames = require('classnames');

var Button = React.createClass({
  // ...
  render () {
    var btnClass = classNames({
      'btn': true,
      'btn-pressed': false,
      'btn-over': true
    });
    // output: btnClass = "btn btn-over"
    return <button className={btnClass}>{this.props.label}</button>;
  }
});

看看文檔，如果您有任何問題，請告訴我！

干杯

Answer 6

其他作者在上述評論中陳述的解決方案對我有用

<div className={ this.state.end ? 'hidden' : 'shown' }>text</div>

如果您想添加更多類，只需添加一個，然后添加以空格分隔的類。

Answer 7

作為記錄，我認為classnames庫的答案是最正確的，但是如果您不想引入另一個依賴項，則可以推出自己的簡單實現，其工作方式類似於 jQuery：

function getClassBuilder () {
    return {
        array: [],
        add: function (className) {
            if (this.array.indexOf(className) < 0) {
                this.array.push(className);
            }
        },
        remove: function (className) {
            var index = this.array.indexOf(className);
            if (index > -1) {
                this.array.splice(index, 1);
            }
        },
        toString: function () {
            return this.array.join(' ');
        }
    }
}

然后，當您需要使用它時：

var builder = getClassBuilder();
builder.add('class1');
builder.add('class2');
if (condition) { builder.remove('class1') };

<a href="#" className={builder.toString()}>Button</a>

Answer 8

我將在 bootstrap 類上進行說明，將有條件地更改文本的顏色：如果 count=0 文本將是紅色，否則將是藍色

class Counter extends Component {
  state = { count: 6 };

  render() {
let classes="text-center" //class is reserved word in react.js
classes+= (this.state.count===0) ? "text-danger" : "text-primary"
    return (
      <div>
        <h2 className={classes}>Hello World</h2>
      </div>
    );
  }
  formatCount() {
    const { count } = this.state;
    return count === 0 ? "zero" : count;
  }
}

Answer 9

具有靜態類名的單一條件

<div className={"container " + (this.props.condition === true ? 'show' : 'hidden')}>

靜態類名的雙重條件

<div className={"container " + (this.props.condition === true ? 'show ' : 'hidden ') + (this.props.secondCondition === true ? 'visible' : 'invisible')}>

最后需要在條件類或靜態類之間留出空間

Answer 10

好的，所以我一直在試驗，結果證明有很多方法，而且並不像我想象的那么難。 這可能會幫助那些剛開始使用 React JS 的人。

所以有兩種方法和兩個添加內嵌樣式的原因：

(1) 在樣式屬性中添加類名作為對象，以便可以在常規 CSS 樣式表中、直接在 JSX 文件中設置樣式或用於條件 CSS

例 1

const classNameAsAPlainObject = {
        color: '#333333',
        backgroundColor: '#999999'
}

<a href="#" className="an-existing-class" style={classNameAsAPlainObject} >
Button
</a>

例2

const conditionIsSomething = {
    color: 'red'
}
<a href="#" className="an-existing-class" style={conditionIsSomething ? 'classNameBasedOnCondition' : ' ' }>
Button
</a>

在第二個示例中，可以根據所需的結果聲明兩個不同的類，或者如果條件為真則聲明一個類，如果條件為假則可以聲明一個類。

(2) 將它添加到需要條件的常規 className 屬性中，但一定要適應現有的類名，並注意此方法需要在常規 CSS 文件中設置樣式。 如果不需要條件，則按照正常方式將類添加到 className 屬性。

例3

<a href="#" className={"an-existing-class " + (conditionIsSomething ? 'thisClass' : 'thatClass')}>
Button
</a>

例4

<a href="#" className={"an-existing-class " + (conditionIsSomething ? 'aClassIsAdded' : ' ')}>
Button
</a>

同樣，如果條件需要，則可以聲明一個類或不聲明一個類，如示例 4 所示。確保在任何一種情況下都在“an-existing-class”之后和結束引號之前留一個空格，以便有一個空格用於條件類。

所以我想作為一般的經驗法則，您將類和樣式添加為對象（與示例 1 和 2 一樣），您可以在 JSX 文件中對其進行樣式設置，但是如果將類名添加到“className”屬性，您將在常規 CSS 文件中對其進行樣式設置。 我還沒有真正嘗試過這個，所以我會嘗試一下。 如果有人發現其他情況，請賜教。