如何使用帶條件包裝的 map() 函數在 JSX 中呈現數組條目

Question

我在 JavaScript 中有一個對象數組，我想遍歷這些對象並返回一些帶有引導程序類的 JSX，這樣每行總是在其中顯示 2 列。

options: [
  {
    "letter":"A",
    "text": "14 March 1879"
  },
  {
    "letter":"B",
    "text": "14 March 1897"
  },
  {
    "letter":"C",
    "text": "24 May 1879"
  },
  {
    "letter":"D",
    "text": "24 June 1879"
  }
]

根據我使用其他語言和模板引擎的經驗，這非常簡單：您只需創建一個帶有row類的開始和結束div標簽，然后使用您的模板引擎，您循環並渲染每個對象，直到您的計數器循環是2 ，您動態地結束該角色並開始一個新角色。

像這樣的東西：

<div class="row">
    for (var i in options) {
      if(i%2 === 0) {
        <!-- render object ... -->
        </div><!-- then end this row -->
        <div class="row"><!-- start new row -->
      } else {
        <!-- render object -->
      }
    }
</div>

我在我的 map 函數中嘗試了這個方法，它給出了一個語法錯誤，因為在條件通過的情況下返回的值不是有效的 JSX。

謝謝你的幫助。

編輯：

最后，我想要實現的是：

如果對象數組包含 2 個對象，我應該能夠像這樣動態顯示它：

 <div class="row">
  <div class="col-md-6">
    <div class="option correct-option">
      A <!-- that is, option.letter -->
    </div>
  </div>
  <div class="col-md-6">
    <div class="option wrong-option">
      B <!-- that is, option.letter -->
    </div>
  </div>
</div>

如果數組包含 3 個對象，我想實現這一點：

 <div class="row">
  <div class="col-md-6">
    <div class="option correct-option">
      A <!-- that is, option.letter -->
    </div>
  </div>
  <div class="col-md-6">
    <div class="option wrong-option">
      B <!-- that is, option.letter -->
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
    <div class="option correct-option">
      C <!-- that is, option.letter -->
    </div>
  </div>
</div>

Answer 1

這樣的事情怎么樣？

{options.map((option, i) => (
    i % 2 === 0 ? null : ( // skip every 2nd row
      <div class="row">
        A: {option}
        B: {i < options.length ? options[i + 1] : null}
      </div>
    )
)}

Answer 2

您可以使用常規的for循環，使i每次循環增加2，並檢查第二個選項是否設置為照顧長度不均的數組：

例

function App() {
  const content = [];

  for (let i = 0; i < options.length; i += 2) {
    content.push(
      <div class="row">
        <div class="col-md-6">
          <div class="option correct-option">{options[i].text}</div>
        </div>
        {options[i + 1] && (
          <div class="col-md-6">
            <div class="option correct-option">{options[i + 1].text}</div>
          </div>
        )}
      </div>
    );
  }

  return <div>{content}</div>;
}

Answer 3

HTML：

結果：

驗證：適用於：Array.length = 0 & Array.length = n 你想要 3 Cols？...定義一個 const 而不是幻數“2”....

代碼：

const options = [
  {
    "letter":"A",
    "text": "14 March 1879"
  },
  {
    "letter":"B",
    "text": "14 March 1897"
  },
  {
    "letter":"C",
    "text": "24 May 1879"
  },
];
return (
  <>
    {
      Array.from(Array(Math.round(options.length / 2)).keys()).map((number, index) => {
        return (
          <div className="row">
            {
                options.slice(index * 2, (index * 2) + 2).map(option=>{
                  return (
                    <div className="col-md-6">
                      <div className={`option ${option.true ? 'correct-option' : 'wrong-option'}`}>
                        {option.letter}-{option.text}
                      </div>
                    </div>
                  );
                })
              }
          </div>
        );
      })
    }
  </>
);