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

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

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


当前回答

也许是当今最大开发者的标准,使用这样的结构:

 let data = [
  {
    id: 1,
    name: "name1"
  },
  {
    id: 2,
    name: "name2"
  },
  {
    id: 3,
    name: "name3"
  },
  {
    id: 100,
    name: "another name"
  }
];

export const Row = data => {
  return (
    <tr key={data.id}>
      <td>{data.id}</td>
      <td>{data.name}</td>
    </tr>
  );
};

function App() {
  return (
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>{data.map(item => Row(item))}</tbody>
    </table>
  );
}

在JSX中,在HTML或任何代码中编写JavaScript操作,{data.map(item=>Row(item))},在map函数中使用单花括号。了解更多地图信息。

这里还可以看到以下输出。

其他回答

你必须用JSX写:

<tbody>
    {
        objects.map((object, i) => (
            <ObjectRow obj={object} key={i} />
        ));
    }
</tbody>

使用地图功能。

<tbody> 
   {objects.map((object, i) =>  <ObjectRow obj={object} key={i} />)} 
</tbody>

Array.from是最好的方法。如果您想创建一个具有一定长度的JSX数组。

function App() {
  return (
    <tbody>
      {Array.from({ length: 10 }, (_, key) => (
        <ObjectRow {...{ key }} />
      ))}
    </tbody>
  );
}

上面的示例适用于没有数组的情况,因此,如果您有数组,则应在JSX中将其映射为:

function App() {
  return (
    <tbody>
      {list.map((item, key) => (
        <ObjectRow {...{ key }} />
      ))}
    </tbody>
  );
}

不能在JSX中直接使用任何循环或其他额外方法。相反,您可以做的是为其生成单独的函数,并生成循环语句,然后在该函数中返回组件上述代码示例:

function renderObjectRow (){
   for (var i=0; i < numrows; i++) {
       return  <ObjectRow/>
     } 
}

<tbody>
{renderObjectRow()}
</tbody>


也许是当今最大开发者的标准,使用这样的结构:

 let data = [
  {
    id: 1,
    name: "name1"
  },
  {
    id: 2,
    name: "name2"
  },
  {
    id: 3,
    name: "name3"
  },
  {
    id: 100,
    name: "another name"
  }
];

export const Row = data => {
  return (
    <tr key={data.id}>
      <td>{data.id}</td>
      <td>{data.name}</td>
    </tr>
  );
};

function App() {
  return (
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>{data.map(item => Row(item))}</tbody>
    </table>
  );
}

在JSX中,在HTML或任何代码中编写JavaScript操作,{data.map(item=>Row(item))},在map函数中使用单花括号。了解更多地图信息。

这里还可以看到以下输出。