Question

我正在通过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。

关于如何告诉全班同学完全省略最后一个的任何想法吗？

Answer 1

这将是您的最佳选择：-

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

Answer 2

检查我已更新代码的代码段。

.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>

Answer 3

尝试一下：

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

Answer 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>

在CSS中的CSS上方：

.display-flex {
    display: flex;

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

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

在地图中显示除最后一个孩子范围外的所有范围

4 个答案: