jsx中三元运算符中的多个条件

Question

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

black is the default color but what if I want to add the 3rd condition?

status can be 'approved', 'rejected', 'pending' or more.

Answer 1

You could do the following:

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

This means if status === 'approved' set the background color as blue, if status === 'pending' set it as black, else set it as red.

Answer 2

I would suggest using functions if your conditions get complicated, to not degrade your code readability.

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

render() {
    // ...

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

Answer 3

Using multiple ternary operators is not a good idea, better to use a function and put if-else conditions inside that and call that function from render. It helps you to make the render part clean and short.

Like this:

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

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

Answer 4

I'd handle it separately as other types of status may appear in the future.

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

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

Code gets easier to understand and reason about.

Answer 5

To chain ternary operations you need to add another ternary operator to be returned when the conditions are not met, for example:

a === true ? a : b

In place of b you would add a new ternary operator, like so:

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

Bonus:

When you're just checking for null/undefined/false you can use the pipe operator, for example this:

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

Can be simplified to:

var x = a || b;

And pipe operators can be chained infinitely like ternary operators.

Answer 6

There is another way how to do it with the a bit more readable & cleaner code style. We can replace the ternary operator with the object literal and use this instead of nesting ternary operators, like so

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>

With this approach you can have multiple colors and code will be still clean & readable :)

Hope it will help.

Answer 7

JSX和JS中三元运算符中的多个条件

style={{'backgroundColor': status === 'approved' ? 'blue' : status === 'cancel' ? 'red' : 'green'}}

Answer 8

I would not use ternary because it gets hard to read. Why not store the status and associated colors in an object then just reference that?

const colors = {approved:"blue", rejected:"red"};


<div style={{'backgroundColor':status in colors ? colors[status] : "black"}}>
</div>

Oops, I didn't realize how old this thread was.

Answer 9

Inside render you can create an empty array variable. As shown below, you can apply nested styling. Also, you won't need a nested ternary operator.

let styleValue = [];
if(status === 'approved') {
  styleValue.push({backgroundColor:'blue'})
} else {
  styleValue.push({backgroundColor:'black'})
}

<div style={styleValue}>
</div>