React中无需额外for/while循环实现0到指定值y的下拉option生成

核心实现思路 #

无需显式声明for/while循环，使用Array.from方法直接生成0到指定数值y的连续整数数组，再通过数组的map方法批量渲染<option>标签即可，满足所有约束条件。

完整可运行代码 #

JSX 逻辑代码 #

const TodoApp = () => {
     const items = [
        {
          id: "877635284991-9",
          name: "ex3",
          quantity: 12
        }
     ]
    // 可自定义目标数值y，示例值为30，也可替换为 items[0].quantity 等动态变量
    const targetNum = 30
    // 生成 0 到 targetNum 的整数数组，无显式循环
    const optionList = Array.from({length: targetNum + 1}, (_, idx) => idx)

    return (
      <div>
        <div>
          <select>
            {optionList.map(num => <option key={num} value={num}>{num}</option>)}
          </select>
        </div>
      </div>
    )
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

逻辑说明 #

• 如果需要生成1到y的序列，只需将Array.from的映射逻辑改为(_, idx) => idx + 1，同时将数组长度改为targetNum即可
• map方法是数组内置迭代方法，不属于约束中禁止的自定义for/while循环，不会触发不可达循环判定

内容的提问来源于stack exchange，提问作者Vitor Gouveia