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

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

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


当前回答

function PriceList({ self }) {
    let p = 10000;
    let rows = [];
    for(let i=0; i<p; i=i+50) {
        let r = i + 50;
        rows.push(<Dropdown.Item key={i} onClick={() => self.setState({ searchPrice: `${i}-${r}` })}>{i}-{r} &#8378;</Dropdown.Item>);
    }
    return rows;
}

<PriceList self={this} />

其他回答

如果numrows是一个数组,那么最好的方法就是map方法。如果不是,并且您只能从JSX访问它,您也可以使用以下ES6方法:

<tbody>
    {
      [...Array(numrows).fill(0)].map((value,index)=><ObjectRow key={index} />)
    }
</tbody>

我见过一个人/以前的答案在数组中使用.contat(),但不是这样。。。

我已经使用concat添加到字符串中,然后通过jQuery选择器在元素上呈现JSX内容:

let list = "<div><ul>";

for (let i=0; i<myArray.length; i++) {
    list = list.concat(`<li>${myArray[i].valueYouWant}</li>`);
}

list = list.concat("</ul></div>);

$("#myItem").html(list);

在JSX块中围绕JavaScript代码使用{},使其正确执行您尝试执行的任何JavaScript操作。

<tr>
  <td>
    {data.map((item, index) => {
      {item}
    })}
  </td>
</tr>

这有点模糊,但您可以为任何阵列交换数据。这将为每个项提供一个表行和表项。如果阵列的每个节点中都有不止一个对象,那么您将希望通过执行以下操作来实现这一目标:

<td>{item.someProperty}</td>

在这种情况下,您将希望用不同的td包围它,并以不同的方式排列前面的示例。

假设您所在的州有一系列项目:

[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]

<tbody>
    {this.state.items.map((item) => {
        <ObjectRow key={item.id} name={item.name} />
    })}
</tbody>

只需使用带有ES6语法的map Array方法:

<tbody>
  {items.map(item => <ObjectRow key={item.id} name={item.name} />)} 
</tbody>

不要忘记密钥属性。