我将如何重新配置一个超级复杂的三元语句？
Posted
技术标签:
【中文标题】我将如何重新配置一个超级复杂的三元语句？【英文标题】：How would I reconfigure a super complicated ternary statement? 【发布时间】：2020-11-06 19:44:34 【问题描述】：所以我试图根据某些布尔值来渲染图像。现在它适用于这个三元语句，但会有更多的选择，我想知道是否有更好的写这个的方法。
这里是三元语句：
<img id="car" 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>
【问题讨论】：
【参考方案1】：您可以使用 javascript 中的 if-else 语句来计算 src 的值，然后在 html/视图代码中使用该值：
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";
【讨论】：
最后当然是document.getElementById("car").src = src。 （只是为了完整性，而且因为我喜欢向 5 岁的人解释东西，显然。）【参考方案2】：
相当于
if (<img id="car" 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>
最好使用switch case
【讨论】：
【参考方案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;
【讨论】：
以上是关于我将如何重新配置一个超级复杂的三元语句？的主要内容，如果未能解决你的问题，请参考以下文章