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循环）。试试这个

关于常数：它取决于你在哪里保持你的常数。我更喜欢将它们保存在单独的文件中。但如果它依赖于组件（而不是依赖于app）常量，则可以在组件文件

中定义它

＆＃13;

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;

＆＃13;

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;

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

2 个答案: