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

我是React和Redux新手，我想创建的React/Redux实现。我想创建常量，例如

MAX\u BOARD\u SIZE=50

，并创建一个包含从1到

MAX\u BOARD\u SIZE

的所有数字的选择框。更改电路板尺寸时，电路板尺寸将自动更改。但是我无法在我的

SelectBoardSize

render函数中创建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;

从“React”导入React；
类SelectBoardSize扩展了React.Component{
render（）{
返回(
对于（让i=1；i您不能在jsx代码中使用任何想要的JS代码（比如for循环）

关于常数的小贴士：在哪里保存常数取决于您。我更喜欢将它们保存在单独的文件中。但如果它是依赖于组件（而不是依赖于应用程序）的常数，您可以在组件文件中定义它


从“React”导入React；
类SelectBoardSize扩展了React.Component{
buildOptions（）{
var-arr=[]；
对于（让i=1；i您可以在
/constants.js
文件中定义常量

export const MAX\u BOARD\u SIZE=24；

然后像这样导入它们：

从导入{MAX_BOARD_SIZE}./constants

另外，在jsx中不可能使用
for
，因此您可以使用
map

import React from 'react';
import _ from 'lodash';
import { MAX_BOARD_SIZE } from './constants'

class SelectBoardSize extends React.Component {
    render() {
        return (
            <select className="select-board-size">
                { _.range(1, MAX_BOARD_SIZE + 1).map(value => <option key={value} value={value}>{value}</option>) }
            </select>
        );
    }
}

export default SelectBoardSize;

从“React”导入React；
从“lodash”进口；
从“./常量”导入{MAX_BOARD_SIZE}
类SelectBoardSize扩展了React.Component{
render（）{
返回(
{{.range（1，最大电路板大小+1）.map（值=>{value}）}
);
}
}
导出默认SelectBoardSize；
如何在单独的文件中定义常量并在此类中使用它们？使用导出语法。创建constants.js文件并
导出const MAX_BOARD_SIZE=50
。在组件文件内部使用
导入{MAX_BOARD_SIZE}从“./constants”
nice one，如itI，我更喜欢不使用状态导入常量。如果将其更改为导入最大线路板大小，我可以接受此答案。只有一个问题-这会将线路板大小从0输出到最大线路板大小-1。我需要从1输出到最大线路板大小。如何更改阵列？我编写了
{array.from（新阵列）（MAX_BOARD_SIZE），（value，index）=>index+1.map（value=>{value}}}
，有没有办法让这一行变短？现在我只能考虑使用lodash library
range
方法：）