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

Question

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

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

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。