Javascript 使用循环呈现JSX给了我语法错误

我试图使用

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;
}

---

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

问题在

for

循环中。将

i+2

替换为

i+=2

问题在

for

循环中。将

i+2

替换为

i+=2

您可以尝试以下方法：

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

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

const number=[2,4,6,8,10]；
常量卡=数字。地图（（i）=>
);

---

更多信息：

您可以尝试以下方法：

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

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

const number=[2,4,6,8,10]；
常量卡=数字。地图（（i）=>
);

---

更多信息：

我修复了属性错误，该错误需要如下字符串：

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

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

---

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

我修复了属性错误，该错误需要如下字符串：

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

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

---

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

这确实解决了问题，但JSX说prop值必须是表达式或文本，因此id={i}不起作用，在其周围加引号使其成为字符串，出于某种原因，我无法用\来转义引号，但JSX说属性值必须是表达式或文本，因此id={I}不起作用，在其周围加引号使其成为字符串，出于某种原因，我无法用引号转义\n您的方法正在工作，但遇到了相同的最终问题，即：prop值必须是表达式或文本，因此id={I}不起作用，在其周围加引号使其成为一个字符串，出于某种原因，我无法用\n转义引号，我认为这与组件的

this.props

有关，与所讨论的循环无关。您可以发布组件的其余部分吗？卡片组件主要使用传入id prop的数字从api中提取结果数组中的10个结果，如下所示：data.articles[this.props.id].title这样，如果我呈现十张卡片，它们各自从api抛出的新结果中提取，那么您的方法正在工作，但最终遇到了相同的问题，即：属性值必须是表达式或文本，因此id={I}不起作用，在其周围加引号使其成为一个字符串，出于某种原因，我无法用\n转义引号，我认为这与组件的

this.props

有关，与所讨论的循环无关。您可以发布组件的其余部分吗？卡片组件主要使用传入id prop的数字从api中提取结果数组中的10个结果，如下所示：data.articles[this.props.id].如果我呈现10张卡片，他们每个人都从api抛出的新结果中提取，则使用这种方式命名