Html 如何在React中执行多个if-else语句？

所以我试图创建一个if-else语句，类似于下面的React

（其中aNumber是任意数字）

if（数量<5）{
展示一幅画
}否则，如果（数量<10）{
显示不同的图片
}否则，如果（数量<15）{
显示另一张不同的图片
}否则{
展示另一张图片
}

在我的表中，this.state.sWA1返回一个风速，因此如果它高于某个值，我希望根据风速的高低显示不同的图片

<td>{this.state.sWA1 > '15' ? <img src={require('../arrowUp.png')} /> : <img src={require('../arrowDown.png')} /> }</td>

{this.state.sWA1>'15'？：}

这目前是可行的，但我似乎只能从一个if-else语句而不是几个if-else语句中找到帮助，有人能提供帮助或建议其他方法吗

谢谢大家!

替代方案

statement (aNumber) {
    if..
      return ..
  }

{this.statement()}

它叫

{this.state.sWA1>15&&
//展示图片
}
{this.state.sWA1>5&&this.state.sWA1使用函数要使代码更清晰，并根据需要使用尽可能多的条件，请为
图像src调用
函数
：

<td><img src={this._checkCondition()} /></td>

您也可以在
require
内部调用此
函数
：

src={require(this._checkCondition())}

_checkCondition(){
    let img;
    if(aNumber < 5){
        img = '';
    }else if (aNumber < 10){
        img = '';
    }else if (aNumber < 15){
        img = '';
    }else{
        img = '';
    }
    return img;  
}

src={require（this.\u checkCondition（））}
_检查条件（）{
让img；
如果（数量<5）{
img=“”；
}否则，如果（数量<10）{
img=“”；
}否则，如果（数量<15）{
img=“”；
}否则{
img=“”；
}
返回img；
}

检查此示例：


var a=[
'http://closethegapca.org/wp-content/plugins/itro-popup/images/close-icon.png',
'http://servemeright.com.au/smr-web/serve-me-right-logo.png',
'https://image.freepik.com/free-icon/add-button-cross-in-a-circle_318-9475.jpg',
'http://static.wixstatic.com/media/38246828849b1ecf8ee948eb6c273d30.wix_mp_256',
'http://photos.merinews.com/upload/imageGallery/bigImage/1286272891909-greenery.jpg'
];
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
价值：1，
};
}
_onclick（i）{
this.setState（{value:i}）
}
_检查条件（）{
设img，value=this.state.value；
如果（值<10）
img=a[0]；
否则，如果（值>10&&值<20）
img=a[1]；
否则，如果（值>20&&值<30）
img=a[2]；
否则，如果（值>30&&值<40）
img=a[3]；
其他的
img=a[4]；
返回img；
}
render（）{
返回(

{[1,15,25,35,45].map（（el，i）=>{
return
Item:{el}
})}

*单击项目以更改图像
图像编号：{this.state.value}
)
}
}
ReactDOM.render（，document.getElementById（'container'）；
如果要删除If语句，可以创建一个数组来映射相应的图像

const windLevels = [
  { value: 5, img: 'a.png' },
  { value: 10, img: 'b.png' },
  { value: 15, img: 'c.png' },
  { value: Infinity, img: 'd.png' }
]

const getImgSrc = (level) =>
  windLevels.find(w => w.value > level).img

// in your render function
// you get c.png
<img src={getImgSrc(13)} />

const windLevels=[
{value:5，img:'a.png'}，
{值：10，img:'b.png'}，
{值：15，img:'c.png'}，
{value:Infinity，img:'d.png'}
]
const getImgSrc=（级别）=>
查找（w=>w.value>level）.img
//在渲染函数中
//你得到了c.png

使用此模式，您可以看到代码变得非常干净

请注意，IE不支持
find（）
，但您可以为此添加一个polyfill。
感谢您的回复！但这会在_checkCondition（）之后生成“意外令牌，预期；”{its said expected；检查更新后的答案，以类似的方式使用它：）谢谢你的回复！当我输入13时，这是有效的，但当我输入13时，this.state.sWA1返回一个数字，它说“意外的令牌，意外的，”…有什么问题吗？
意外的令牌，
表示你在某个地方有语法错误
_checkCondition(){
    let img;
    if(aNumber < 5){
        img = '../a';
    }else if (aNumber < 10){
        img = '../b';
    }else if (aNumber < 15){
        img = '../c';
    }else{
        img = '../d';
    }
    return require(img);   
}

src={require(this._checkCondition())}

_checkCondition(){
    let img;
    if(aNumber < 5){
        img = '';
    }else if (aNumber < 10){
        img = '';
    }else if (aNumber < 15){
        img = '';
    }else{
        img = '';
    }
    return img;  
}

const windLevels = [
  { value: 5, img: 'a.png' },
  { value: 10, img: 'b.png' },
  { value: 15, img: 'c.png' },
  { value: Infinity, img: 'd.png' }
]

const getImgSrc = (level) =>
  windLevels.find(w => w.value > level).img

// in your render function
// you get c.png
<img src={getImgSrc(13)} />