在React JSX内部循环


狗头军师
2025-03-07 06:31:21 (1天前)

我正在React中尝试执行以下操作JSX(其中ObjectRow是一个单独的组件):



  1. for (var i=0; i < numrows; i++) {

    }

我意识到并理解为什么这是无效的JSX,因为它JSX映射到函数调用。但是,由于来自模板领域并且是的新手JSX,所以我不确定如何实现上述目标(多次添加组件)。

2 条回复
  1. 1# v-star*위위 | 2020-08-12 14-45

    就像您只是在调用JavaScript函数一样。您不能使用for循环来调用函数的参数:

    1. return tbody(
    2. for (var i = 0; i < numrows; i++) {
    3. ObjectRow()
    4. }
    5. )

    查看如何将函数作为参数tbody传递给for循环-导致语法错误。

    但是您可以创建一个数组,然后将其作为参数传递:

    1. var rows = [];
    2. for (var i = 0; i < numrows; i++) {
    3. rows.push(ObjectRow());
    4. }
    5. return tbody(rows);

    使用JSX时,可以使用基本相同的结构:

    1. var rows = [];
    2. for (var i = 0; i < numrows; i++) {
    3. // note: we add a key prop here to allow react to uniquely identify each
    4. // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    5. rows.push(<ObjectRow key={i} />);
    6. }
    7. return <tbody>{rows}</tbody>;

    顺便说一句,我的JavaScript示例几乎就是该JSX示例转换成的示例。与Babel REPL一起玩,以了解JSX的工作方式。

登录 后才能参与评论