for 循环只返回 reactJS 中的初始索引

Question

我是 React JS 新手，所以作为我的实践，我正在创建一个动态的生日表单。我的第一个挑战是在选择的出生年份中列出从 1900 年到当前年份（2017 年）的年份，所以我使用for 循环使其更短，而不是在标记。下面的代码没有执行成功，它只返回了 2017。

export default class Items extends Component {
  render() {
    return(
      <div>
        <form>
          <select name='year' className='yearSelect'>
            <option value="">Year</option>
            {
              for(let yearCount = 2017; yearCount >= 1900; yearCount--)
                return <option value={yearCount}>{yearCount}</option>
            }
          </select>
        </form>
      </div>
    );
  }
}

在控制台中，它抛出了一个错误，上面写着：

花括号因为作用域而困扰我，所以我不得不删除 for 循环的花括号并缩进其中的行。

Answer 1

更新您的代码，如下所示。

export default class Items extends Component {
  render() {
       let options = [];
         for(let yearCount = 2017; yearCount >= 1900; yearCount--)
             options.push((<option value={yearCount} key={yearCount}>{yearCount}</option>));
    return(
      <div>
        <form>
          <select name='year' className='yearSelect'>
            <option value="">Year</option>
            { options }
          </select>
        </form>
      </div>
    );
  }
}