reactjs - 在react js中的组件的return语句中循环

Question

我试图在我的组件文件中显示年份选择框。我尝试了一个简单的 for 循环，但它给出了语法错误。这是我的

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