循环中的JSX条件元素

Question

如何在条件上定义标记的开放并在另一个条件上关闭标记。在下面的示例中，我试图将每两个元素包装在一个新行上。但似乎没有用。样本 - https://jsfiddle.net/reactjs/69z2wepo/render() {     let menuItems = [];     for (var i = 0; i < 10; i++) {         menuItems.push(         {i%2 !== 0 ? <div class="row">:<>}         <div>hi</div>         {i%2 === 0 ? </div>:<>}         );     }     return <div>{menuItems}</div>;   }

Answer 1

这样做怎么样？

  render() {
      let menuItems = [];
      for (var i = 0; i < 10; i++) {
          const hi = <div>hi</div>
          const item = i%2 === 0
              ? <div className="row">{hi}{hi}</div>
              : hi;
          menuItems.push(item);
      }
      return <div>{menuItems}</div>;
  }

您可能还想添加一个'key'属性，因为react会对元素数组发出警告。

Answer 2

如果你想要的输出只是下面没有其他约束的东西（即每行内总是两个hi）

<div className="row">

   <div>hi</div>

   <div>hi</div>

</div> 

<div className="row">

   <div>hi</div>

   <div>hi</div>

</div>

..........

你可以做：

let menuItems = []

for(let i = 0 ; i < 5; i++){

  menuItems.push(<div className="row"><div>hi</div><div>hi<div></div>)

}