循環中反應的成分的return語句JS

Question

我試圖表明今年選擇框組件文件，我想簡單的for循環，但其givign語法錯誤，這裏是我的代碼>

render(){ 

    return (
      <div> 
       <select value={this.state.exp_year} name="exp_year" className="form-control" onChange={this.handleInputChange} > 
        <option value="">===Select Expiry Year===</option> 
        { for(var i=2017; i<=2050; i++){ 
         <option value={i}>{i}</option> 
         } 
        } 
       </select> 
      </div>     

     ); 
} 

請讓我知道我做錯了什麼。

Answer 1

基本上，您不能在JSX中執行直接循環，因爲它有點像尋求函數參數。什麼，但是你可以做的是，你可以把一個IIFE有它返回的像一組選項：

render() { 
    return (
    <div> 
     <select 
     value={this.state.exp_year} 
     name="exp_year" 
     className="form-control" 
     onChange="this.handleInputChange"> 
     <option value="">===Select Expiry Year===</option> 
     {(() => { 
      const options = []; 

      for (let i = 2017; i <= 2050; i++) { 
      options.push(<option value={i}>{i}</option>); 
      } 

      return options; 
     })()} 
     </select> 
    </div> 
); 
} 

但是，說實話看起來凌亂，所以你應該可能只是在返回前向外移動的循環：

render() { 
    const options = []; 

    for (let i = 2017; i <= 2050; i++) { 
    options.push(<option value={i}>{i}</option>); 
    } 

    return (
    <div> 
     <select 
     value={this.state.exp_year} 
     name="exp_year" 
     className="form-control" 
     onChange="this.handleInputChange"> 
     <option value="">===Select Expiry Year===</option> 
     {options} 
     </select> 
    </div> 
); 
} 

Answer 2

首先將選項構建到數組中，然後在JSX代碼中使用該數組。

class YearComponent { 
    render() { 
    const options = []; 
    for (var i = 2017; i <= 2050; i++) { 
     options.push(<option value={i} key={i}>{i}</option>); 
    } 
    return (
     <div> 
     <select 
      value={this.state.exp_year} 
      name="exp_year" 
      className="form-control" 
      onChange={this.handleInputChange} 
     > 
      <option value="">===Select Expiry Year===</option> 
      {options} 
     </select> 
     </div> 
    ); 
    } 
}