循环中的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

这样做怎么样？&nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;menuItems&nbsp;=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;10;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;hi&nbsp;=&nbsp;<div>hi</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;item&nbsp;=&nbsp;i%2&nbsp;===&nbsp;0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;?&nbsp;<div&nbsp;className="row">{hi}{hi}</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;hi; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;menuItems.push(item); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<div>{menuItems}</div>; &nbsp;&nbsp;}您可能还想添加一个'key'属性，因为react会对元素数组发出警告。

Answer 2

如果你想要的输出只是下面没有其他约束的东西（即每行内总是两个hi）<div className="row">&nbsp; &nbsp;<div>hi</div>&nbsp; &nbsp;<div>hi</div></div>&nbsp;<div className="row">&nbsp; &nbsp;<div>hi</div>&nbsp; &nbsp;<div>hi</div></div>..........你可以做：let menuItems = []for(let i = 0 ; i < 5; i++){&nbsp; menuItems.push(<div className="row"><div>hi</div><div>hi<div></div>)}