时间戳

首页 > 解决方案 > 显示地图中除最后一个子跨度之外的所有跨度

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

问题描述

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

这是代码：

  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”&gt;
    <span>|</span>
  </div>
  <span>Mapped Item 2</span>
  <div class=“users-overview-screen__no-last-child”&gt;
    <span>|</span>
  </div>
    <span>Mapped Item 3</span>
  <div class=“users-overview-screen__no-last-child”&gt;
    <span>|</span>
  </div>
</div>

在上述场景中，我希望carretMapped Item 3 中的最后一个 根本不出现。但是对于我当前的 scss，没有出现 carret。

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

标签： cssreactjstypescriptsass

解决方案

这将是您的最佳选择：-

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

推荐阅读