如何在React中使用for循环创建一个下拉选择框？

Question

我刚接触React和Redux，希望创建一个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或者其他类文件之外的地方。

- Uri

Answer 1

在jsx代码内部，您不能使用任何JS代码（如for循环）。请尝试以下方法

关于常量：您可以自行决定将常量保存在何处。我喜欢将它们保存在单独的文件中。但是，如果它是组件相关的常量（而不是应用程序相关的），则可以在组件文件内定义它。

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;

- disstruct

---

我该如何在一个单独的文件中定义常量并在这个类中使用它们？ - Uri

使用导出语法。创建constants.js文件并export const MAX_BOARD_SIZE = 50。在组件文件中使用import { MAX_BOARD_SIZE } from './constants'。 - disstruct

Answer 2

您可以在./constants.js文件中定义常量。

export const MAX_BOARD_SIZE = 24;

然后像这样导入它们：

import { MAX_BOARD_SIZE } from './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;

- Dan Cantir

---

不错，我喜欢。 - disstruct

我更喜欢在不使用状态的情况下导入常量。如果你将其更改为导入MAX_BOARD_SIZE，我可以接受这个答案。 - Uri

只有一个问题 - 这会输出从0到MAX_BOARD_SIZE-1的棋盘尺寸。我需要从1到MAX_BOARD_SIZE。我该如何更改数组？我写了 { Array.from(new Array(MAX_BOARD_SIZE),(value, index) => index + 1).map(value => <option key={value} value={value}>{value}</option>) }，有没有缩短这行代码的方法？ - Uri

现在我只能想到使用lodash库https://lodash.com/docs/#range range方法 :) - Dan Cantir