web-dev-qa-db-ja.com

jsxの三項演算子の複数の条件

<div style={{'backgroundColor': status === 'approved' ? 'blue' : 'black'}}>
</div>

デフォルトの色は黒ですが、3番目の条件を追加したい場合はどうなりますか？

ステータスは「承認済み」、「拒否済み」、「保留中」などです。

javascriptreactjsjsx
12
Jenny Mok

次のことができます。

<div style={{'backgroundColor': status === 'approved' ? 'blue' : status === 'pending' ? 'black' : 'red'}}>
</div>

つまり、status === 'approved'の場合、背景色を青に設定しますstatus === 'pending'黒に設定するか、赤に設定します。

10
Paul Fitzgerald

コードの読みやすさを損なわないように、条件が複雑になった場合は関数を使用することをお勧めします。

getBackgroundColor(status) {
    if (status === 'approved') {
        return 'blue';
    }
    if (status === 'pending') {
        return 'red';
    }
    return 'black';
}

render() {
    // ...

    return (
        <div style={{ 'backgroundColor': this.getBackgroundColor(status) }}></div>
    );
}
8
Ghassen Louhaichi

他の種類のステータスが将来表示される可能性があるため、個別に処理します。

const getBackgroundColor(status) {
  if (status === 'approved') {
    return 'blue'
  }
  else if (status === 'pending') {
    return 'black'
  } else {
    return 'red'
  }
}

<div style={{'backgroundColor': getBackgroundColor(status) }}>
</div>

コードが理解しやすくなり、理由がわかります。

1
mersocarlin

複数の三項演算子を使用することは良い考えではありません。関数を使用し、その中にif-else条件を入れて、レンダリングからその関数を呼び出す方が良いでしょう。レンダーパーツをクリーンで短いものにするのに役立ちます。

このような：

<div style={{'backgroundColor': this._style(status)}}></div>

_style(status){
    if(status == 'approved')
        return 'blue';
    else if(status == 'pending')
        return 'black';
    else return 'red';
}
0
Mayank Shukla

もう少し読みやすく、よりクリーンなコードスタイルでこれを行う方法が他にもあります。三項演算子をオブジェクトリテラルに置き換えて、三項演算子をネストする代わりにこれを使用できます。

function getBackgroundColor(status){
  const backgroundColorByStatus = {
    approved: 'blue',
    pending: 'black',
    default: 'red',
  }

  return backgroundColorByStatus[status] || backgroundColorByStatus['default']
}

// somewhere below
<div style={{'backgroundColor': getBackgroundColor(status)}}>fancy div</div>

このアプローチでは、複数の色を使用でき、コードはクリーンで読みやすくなります:)

それがお役に立てば幸いです。

0
The Reason

三項演算を連鎖させるには、条件が満たされないときに返される別の三項演算子を追加する必要があります。次に例を示します。

a === true ? a : b

bの代わりに、次のように新しい三項演算子を追加します。

a === true ? a : b === true ? b : c

ボーナス：

Null/undefined/falseを確認するだけの場合、パイプ演算子を使用できます。たとえば、次のようになります。

var x = a !== null ? a : b;

次のように簡略化できます。

var x = a || b;

また、パイプ演算子は、3項演算子のように無限にチェーンできます。

0
Dom