如何重新配置超复杂的三元语句

Question

所以我试图基于某些布尔值来渲染图像。它目前适用于这个三元语句，但会有更多的选择，我想知道是否有更好的写法。

这是三元语句：

<img id="car" alt="" height="200" width="500" src={this.state.isRed && this.state.rimOne ? "/Assets/red.png" : this.state.isRed && this.state.rimTwo ? "/Assets/red2.png" : this.state.isBlue && this.state.rimOne ? "/Assets/Blue.png" : this.state.isBlue && this.state.rimTwo ? "/Assets/Blue2.png" : this.state.isLightBlue && this.state.rimOne ? "/Assets/lightblue.png" : this.state.isLightBlue && this.state.rimTwo ? "/Assets/lightblue2.png" : this.state.isSkyBlue && this.state.rimOne ? "/Assets/Skyblue.png" : this.state.isSkyBlue && this.state.rimTwo ? "/Assets/Skyblue2.png" : this.state.isWhite && this.state.rimOne ? "/Assets/White.png" : this.state.isWhite && this.state.rimTwo ? "/Assets/white2.png" : null}></img>

Answer 1

您可以使用JavaScript中的if-else语句来计算src的值，然后在HTML/view代码中使用此值：

var src = null;
if (this.state.isRed && this.state.rimOne) {
src = "/Assets/red.png";
}
else if (this.state.isRed && this.state.rimTwo) {
src = "/Assets/red2.png";
}
else if (this.state.isBlue && this.state.rimOne) {
src = "/Assets/Blue.png";
}
else if (this.state.isBlue && this.state.rimTwo) {
src = "/Assets/Blue2.png";
}
else if (this.state.isLightBlue && this.state.rimOne) {
src = "/Assets/lightblue.png";
}
else if (this.state.isLightBlue && this.state.rimTwo) {
src = "/Assets/lightblue2.png";
}
else if (this.state.isSkyBlue && this.state.rimOne) {
src = "/Assets/Skyblue.png";
}
else if (this.state.isSkyBlue && this.state.rimTwo) {
src = "/Assets/Skyblue2.png";
}
else if (this.state.isWhite && this.state.rimOne) {
src = "/Assets/White.png";
}
else if (this.state.isWhite && this.state.rimTwo) {
src = "/Assets/white2.png";
}

Answer 2

它相当于

if (<img id="car" alt="" height="200" width="500" src={this.state.isRed && this.state.rimOne) {
"/Assets/red.png"
} else {
if (this.state.isRed && this.state.rimTwo) {
"/Assets/red2.png"
} else {
if (this.state.isBlue && this.state.rimOne) {
"/Assets/Blue.png"
} else {
if (this.state.isBlue && this.state.rimTwo) {
"/Assets/Blue2.png"
} else {
if (this.state.isLightBlue && this.state.rimOne) {
"/Assets/lightblue.png"
} else {
if (this.state.isLightBlue && this.state.rimTwo) {
"/Assets/lightblue2.png"
} else {
if (this.state.isSkyBlue && this.state.rimOne) {
"/Assets/Skyblue.png"
} else {
if (this.state.isSkyBlue && this.state.rimTwo) {
"/Assets/Skyblue2.png"
} else {
if (this.state.isWhite && this.state.rimOne) {
"/Assets/White.png"
} else {
if (this.state.isWhite && this.state.rimTwo) {
"/Assets/white2.png"
} else {
null}></img>
}
}
}
}
}
}
}
}
}
}

最好使用交换机案例

Answer 3

我做了一些代码高尔夫球来想出这个：

function getAssetURL() {
if (!this.state.rimOne && !this.state.rimTwo)
return null;
let s = '/Assets/';
['Red', 'Blue', 'LightBlue', 'SkyBlue', 'White'].forEach(c => this.state['is' + c] && (s += c));
return (s + (this.state.rimTwo ? '2' : '') + '.png').replace(/[RL]|wB|W.*2/g, l => l.toLowerCase());
}

以下是一个演示，它可以产生与另一个更详细的答案相同的结果：

'use strict';
const object = {};
['isRed', 'isBlue', 'isLightBlue', 'isSkyBlue', 'isWhite'].forEach(color => {
['rimOne', 'rimTwo'].forEach(number => {
const state = { [color]: true, [number]: true };
object.state = state;
console.log(color, number);
console.log(' ' + getAssetURL1.call(object));
console.log(' ' + getAssetURL2.call(object));
});
});
function getAssetURL1() {
if (!this.state.rimOne && !this.state.rimTwo)
return null;
let s = '/Assets/';
['Red', 'Blue', 'LightBlue', 'SkyBlue', 'White'].forEach(c => this.state['is' + c] && (s += c));
return (s + (this.state.rimTwo ? '2' : '') + '.png').replace(/[RL]|wB|W.*2/g, l => l.toLowerCase());
}
function getAssetURL2() {
var src = null;
if (this.state.isRed && this.state.rimOne) {
src = "/Assets/red.png";
}
else if (this.state.isRed && this.state.rimTwo) {
src = "/Assets/red2.png";
}
else if (this.state.isBlue && this.state.rimOne) {
src = "/Assets/Blue.png";
}
else if (this.state.isBlue && this.state.rimTwo) {
src = "/Assets/Blue2.png";
}
else if (this.state.isLightBlue && this.state.rimOne) {
src = "/Assets/lightblue.png";
}
else if (this.state.isLightBlue && this.state.rimTwo) {
src = "/Assets/lightblue2.png";
}
else if (this.state.isSkyBlue && this.state.rimOne) {
src = "/Assets/Skyblue.png";
}
else if (this.state.isSkyBlue && this.state.rimTwo) {
src = "/Assets/Skyblue2.png";
}
else if (this.state.isWhite && this.state.rimOne) {
src = "/Assets/White.png";
}
else if (this.state.isWhite && this.state.rimTwo) {
src = "/Assets/white2.png";
}
return src;
}