Question

所以我试图在React中创建一个类似于else的if else语句......

（其中aNumber是任意数字）

if(aNumber < 5){
    show a picture
}else if (aNumber < 10){
    show a different picture
}else if (aNumber < 15){
    show another different picture
}else{
    show a some other 4th picture
}

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

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

这目前有效，但我似乎只能找到一个if else语句的帮助，而不是几个if else语句，任何人都可以帮助或建议替代方法吗？

谢谢！

Answer 1

替代解决方案;

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

{this.statement()}

Answer 2

它被称为conditional rendering

<div>
  { this.state.sWA1>15 && 
  <div>
    //show picture
  </div>}
  { this.state.sWA1>5 && this.state.sWA1<15
  <div>
    //show picture
  </div>}
</div>

Answer 3

使用函数使代码更清晰并使用任意数量的条件，为function调用image src：

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

在function内检查条件并return图片：

_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);   
}

您也可以在function内调用此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;  
}

检查此示例：

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'
];

class App extends React.Component {
  constructor() {
    super();
    this.state = {
        value: 1,
    };
  }
  
  _onclick(i){
     this.setState({value: i})
  }
  
  _checkCondition(){
     let img, value = this.state.value;
     if(value < 10)
         img = a[0];
     else if(value > 10 && value < 20)
         img = a[1];
     else if(value > 20 && value < 30)
         img = a[2];
     else if(value > 30 && value < 40)
         img = a[3];
     else
         img = a[4];
     return img;
  }
  
  render() {
    return (
       <div>
             <ul>
                 {[1,15,25,35,45].map((el,i)=>{
                     return <li key={i} onClick={this._onclick.bind(this,el)}>Item: {el}</li>
                 })}
             </ul>
             <div>* Click on items to change the image</div>
             <div>Image No: {this.state.value}</div>            
             <img style={{width: '100px'}} src={this._checkCondition()}/>
       </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='container'></div>

Answer 4

如果要删除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)} />

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

请注意，IE不支持find()，但您可以为此添加填充。

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

4 个答案: