在地圖功能中使用三元數顯示兩個選項

Question

我正在嘗試簡化地圖功能，並根據數據對象中子代的長度顯示兩個選項。 基本上，該函數會映射數據，如果每個組有3個以上的條目，則顯示一個視圖。 如果該組少於3個，則顯示不同的視圖。 我目前有顯示超過3個條目的視圖，但是無法使三元運算符設置顯示少於3個 。 當我嘗試添加另一個映射函數時，它在其他中間顯示小於3的組。 我需要顯示少於三個的組，超過三個的組。

{children.length > 3 &&
    children.map((item, i) => (
      <li key={i} className={classes.member}>
        <a href={`mailto:${item.email}`}>
          {item.profile ? (
            <div
              className={
                (item.lead === true && ` ${classes.profilelead}`) || ""
              }
            >
         </a>
       </li>
    ))
}

UPDATE

我已經建立了三元組，但是在將大於3的分組呈現為大於3的分組時遇到了麻煩

{children.map(
    (item, i) =>
      children.length > 3 ? (
        <li className={classes.member}>
          <a href={`mailto:${item.email}`}>
              <div
                className={
                  (item.lead === true && ` ${classes.profilelead}`) || ""}
              >
              </div>
          </a>
        </li>
      ) : (
        <p>profiles less than 3 here, but should be rendered above the greater than 3 above.</p>
      )
  )}

Answer 1

通過按大小對子級數組對象進行排序，我能夠在頂部（或底部，如果需要）的情況下將每組少於3個項目的分組排列如下：

{props.children
    .sort((a, b) => a.children.length - b.children.length)
    .map(section => <Section {...section} classes={classes} />)}