我将如何重新配置一个超级复杂的三元语句？答案

【问题标题】：How would I reconfigure a super complicated ternary statement?我将如何重新配置一个超级复杂的三元语句？
【发布时间】：2020-11-06 19:44:34
【问题描述】：

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

这里是三元语句：

<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>

【问题讨论】：

标签： javascript reactjs jsx conditional-operator

【解决方案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" 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>
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

最好使用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;
}

【讨论】：