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

在渲染之前構建數據對象； 這使React能夠以聲明性的方式呈現，並且足夠靈活以呈現您想要添加的任意行或列。

另外，我保留了創建rows數組的目的，目的是冗長； 沒有理由沒有循環中使用的numRows變量來追加到rows數組。

https://codesandbox.io/s/clever-moser-3j51c

零件

function App() {
  const cell = "hi";
  const rows = [
    [cell, cell],
    [cell, cell],
    [cell, cell],
    [cell, cell],
    [cell, cell]
  ];

  return rows.map((row, i) => {
    return (
      <div key={i} className="row">
        {row.map((data, j) => (
          <span key={j}>{data}</span>
        ))}
      </div>
    );
  });
}

輸出量

hi hi
hi hi
hi hi
hi hi
hi hi

由於您沒有提供CSS，因此我將內部的<div>元素替換為<span> ，因此您可以自行設置適當的樣式。

Answer 2

您需要恢復邏輯。 您試圖總是插入一個<div>但是您需要做的是將其保存在<div>數組中，並僅在所需的時間將其推入。

render() {
    let menuItems = [];
    let hiDivs = []
    for (var i = 0; i < 10; i++) {
        hiDivs.push(<div>hi</div>)
        if(hiDivs.length === 2){
            menuItems.push(<div class="row">{hiDivs}</div>)
            hiDivs = []
        }
    }
    return <div>{menuItems}</div>;
}

您可以dangerouslySetInnerHTML使用dangerouslySetInnerHTML但這非常糟糕，不建議使用...

Answer 3

這樣做怎么樣？

  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 4

如果您想要的輸出只是下面的輸出而沒有其他限制（即，每行內總是兩個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>)
}