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

Question

我是React和Redux的新手,我想创建一个Chess Queens的React/Redux实现.我想创建常量,例如MAX_BOARD_SIZE = 50,并创建一个包含从1到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代码(比如f​​or循环).试试这个

PS关于常数:取决于你在哪里保持常数.我更喜欢将它们保存在单独的文件中.但如果它依赖于组件(而不是依赖于应用程序)常量,则可以在组件文件中定义它

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;

Answer 2

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

export const MAX_BOARD_SIZE = 24;

然后像这样导入它们：

import { MAX_BOARD_SIZE } from './constants;

也无法for在 jsx 中使用，因此您可以使用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;