Question

我正在尝试在组件文件中显示年份选择框，我尝试了简单的for循环但是它的givign语法错误，这里是我的代码＆gt;

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

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

2 个答案: