显示地图中除最后一个子跨度之外的所有跨度答案

【问题标题】：Display all but the last-child span in a map显示地图中除最后一个子跨度之外的所有跨度
【发布时间】：2019-11-25 03:48:56
【问题描述】：

我正在通过 ReactJS 应用程序中的对象进行映射。在该映射的每个元素之间，我添加了一个带有简单括号 | 的跨度。

代码如下：

  renderSecurityModes = (securityKey: string): JSX.Element => {
    const { user } = this.props;
    return (
      <div key={securityKey} className="users-overview-screen__no-last-child">
        {user && user.security && user.security[securityKey as SecurityMode] && (
          <Fragment>
            <span className="font-weight-medium mr-3 text-uppercase">{securityKey}</span>
            <span className="text-border-gray mx-3">|</span>
          </Fragment>
        )}
      </div>
    );
  };

问题：我希望映射的项目在它们之间有|，但最后一个，我想display: none

所以，我添加了一个小类来做到这一点。显示除最后一个孩子之外的所有内容。但由于映射发生，它认为每个 carret 都是last-child：

这里是scss：

.users-overview-screen__no-last-child {
  span:last-child {
      display: none;
  }
}

DOM 结构：

<div class="display-flex>
  <span>Mapped Item 1</span>
  <div class=“users-overview-screen__no-last-child”>
    <span>|</span>
  </div>
  <span>Mapped Item 2</span>
  <div class=“users-overview-screen__no-last-child”>
    <span>|</span>
  </div>
    <span>Mapped Item 3</span>
  <div class=“users-overview-screen__no-last-child”>
    <span>|</span>
  </div>
</div>

在上述场景中，我希望映射项 3 中的最后一个 carret 根本不出现。但是用我目前的 scss，没有出现 carret。

关于如何告诉班级只省略绝对最后一个的任何想法？

【问题讨论】：

标签： css reactjs typescript sass

【解决方案1】：

检查sn-p 我已经更新了代码。

.display-flex div:last-child span {
    display: none;
}

<div class="display-flex">
  <span>Mapped Item 1</span>
  <div class=“users-overview-screen__no-last-child”>
    <span>|</span>
  </div>
  <span>Mapped Item 2</span>
  <div class=“users-overview-screen__no-last-child”>
    <span>|</span>
  </div>
    <span>Mapped Item 3</span>
  <div class=“users-overview-screen__no-last-child”>
    <span>|</span>
  </div>
</div>

【讨论】：

不幸的是，这不起作用。我将更新描述以显示 DOM 如何打印出映射的元素..
添加了工作 sn-p 这将解决您的问题。

【解决方案2】：

试试这个：

.display-flex div:last-child{
  display: none;
}

【讨论】：

【解决方案3】：

这将是您的最佳选择：-

.users-overview-screen__no-last-child:last-child span:last-child {
    display: none;
}

【讨论】：

【解决方案4】：

你有不同的选择，这里有两个：

.users-overview-screen__no-last-child {
    &:last-of-type { /* takes last element wrapping the item */
        &:last-child { /* removes the last element of the last item*/
            display: none;
        }
    }
}

但我认为最佳选择是为每个跨度项目提供右边框和填充并去掉小方块或分隔符，这样干净清晰：

.display-flex {
    display: flex;
}

span {
    padding: 0 10px;
    box-sizing: border-box;
    border-right: 1px solid black;
}
    
span:last-of-type {
  border-right: none;
}

<div class="display-flex">
  <span>Mapped Item 1</span>
  <span>Mapped Item 2</span>
  <span>Mapped Item 3</span>
</div>

在scss中的css之上：

.display-flex {
    display: flex;

    span {
        padding: 0 10px;
        box-sizing: border-box;
        border-right: 1px solid black;
    }

    &:last-of-type {
      border-right: none;
    }
}

【讨论】：