reactjs - 如何在 React 中创建带有 for 循环的选择框？

Question

我是 React 和 Redux 新手，我想创建 Chess Queens 的 React/Redux 实现。我想创建常量，例如 MAX_BOARD_SIZE = 50，并创建一个包含 1 到 MAX_BOARD_SIZE 之间所有数字的选择框。当更改板尺寸时，板尺寸将自动更改。但我无法在 SelectBoardSize 渲染函数中创建 for 循环。这是我的代码:

import React from 'react';

class SelectBoardSize extends React.Component {
    render() {
        return (
            <select className="select-board-size">
                for (let i = 1; i <= 50; i++) {
                   <option value="{i}">{i}</option>
                }
            </select>
        );
    }
}

export default SelectBoardSize;

而且我也不知道在哪里定义常量以及如何在这个类中使用这个值？常量应该在另一个文件中定义，例如 constants.jsx 或此类文件之外的某个位置。

Answer 1

您不能在 jsx 代码中使用任何您想要的 JS 代码(例如 for 循环)。试试这个

P.S 关于常量:由您决定在哪里保存常量。我更喜欢将它们保存在单独的文件中。但如果它依赖于组件(而不是依赖于应用程序)常量，您可以在组件文件中定义它

import React from 'react';

class SelectBoardSize extends React.Component {
    buildOptions() {
        var arr = [];

        for (let i = 1; i <= 10; i++) {
            arr.push(<option key={i} value="{i}">{i}</option>)
        }

        return arr; 
    }

    render() {
        return (
            <select className="select-board-size">
                {this.buildOptions()}
            </select>
        );
    }
}

export default SelectBoardSize;