使用循环渲染 JSX 会出现语法错误

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 和 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 和 10 之间的数字，后来 `` 在数字周围加上引号使其成为一个字符串。如果您知道更简单的方法，请发表评论，但这对我有用。

使用循环渲染 JSX 会出现语法错误

Using a loop to render JSX is giving me syntax errors

javascript

loops

render

jsx

reactjs