javascript - 我将如何重新配置​​一个 super 复杂的三元语句？

Question

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

这里是三元语句:

<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";
}