Question

我正在尝试使用for循环在JSX中渲染重复块，这就是我的方法。

在我的组件中，但在我的渲染之外，我的功能如下：

tenCards = () => {

    let block = [];

    /* Outer loop for container */
    for(var i = 0; i < 11; i+2){
        block.push(
            <div className="container">
                <Card id={i}/>
                <Card id={i+1}/>
            </div>
        );
    }

    return block;
}

在我的渲染中，我很简单地调用{this.tenCards()}。我得到了一个语法错误，现在它成功编译，但页面永远不会加载，我得到了

aw snap chrome error。

我刚刚做错了for循环吗？

在用i + = 2切换i + 2后，它确实向前移动了一步，但JSX表示属性值必须是表达式或文本，因此id = {i}不起作用并且在它周围加上引号使它成为一个字符串由于某种原因，我无法用\来逃避引号。

我修复了属性错误，它需要是一个像这样的字符串

<Card id={`${i}`} />

因此，JSX知道这是一个JavaScript表达式，它给出了一个介于0和0之间的数字。 10和之后的``引号放在数字周围，使其成为一个字符串。如果您知道一种更简单的方法，请发表评论，但这对我有用。

Answer 1

问题出在for循环中。将i + 2替换为i += 2。

Answer 2

您可以尝试这样的事情：

const numbers = [2, 4, 6, 8, 10];
const cards = numbers.map((i) =>
    <div className="container">
        <Card id={i}/>
        <Card id={i+1}/>
    </div>
);

更多信息：https://reactjs.org/docs/lists-and-keys.html#rendering-multiple-components

Answer 3

我修复了属性错误，需要是这样的字符串：

<Card id={`${i}`} />

因此，JSX知道这是一个JavaScript表达式，它给出了一个介于0和0之间的数字。 10和之后的``引号放在数字周围，使其成为一个字符串。如果您知道一种更简单的方法，请发表评论，但这对我有用。

使用循环来渲染JSX会给我语法错误

3 个答案: