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>
    ))
}

更新

我已经建立了三元组，但是在将大于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} />)}

在地图中使用三元函数显示两个选项

1 个答案: