1
votes

Afficher tout sauf le dernier intervalle enfant dans une carte

Je mappe via un objet dans une application ReactJS. Entre chaque élément de ce mappage, j'ajoute un span avec un simple carret | .

Voici le code:

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

LE PROBLÈME : Je veux que l'élément du mappage ait le | entre eux, mais le dernier, je veux afficher: aucun

Donc, j'ai ajouté un peu de classe pour faire juste ça. Affichez tout sauf le dernier enfant. Mais puisque le mappage a lieu, il pense que chaque carret est le last-child:

Voici le scss:

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

LA STRUCTURE DOM:

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

Dans le scénario ci-dessus, je veux que le dernier carret , dans l'élément mappé 3, n'apparaisse pas du tout. Mais avec mon scss actuel, aucun carret n'apparaît.

Des idées, sur la façon de dire à la classe d'omettre uniquement la dernière absolument?

reactjs typescript css sass

0 commentaires

4 Réponses :

1
votes

Vérifiez l'extrait de code J'ai mis à jour le code.

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

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

2 commentaires

Malheureusement, cela ne fonctionne pas. Je mettrai à jour la description pour montrer comment le DOM imprime les éléments mappés.

ajouté un extrait de code, cela résoudra votre problème.

1
votes

Essayez ceci:

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

0 commentaires

2
votes

Ce serait la meilleure option pour vous: -

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

0 commentaires

0
votes

Vous avez différentes options, en voici deux:

.display-flex {
    display: flex;

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

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

Cependant, je pense que la meilleure option serait de donner une bordure à droite strong> et padding à chaque élément d'étendue et supprimez les carettes ou les séparateurs , ce qui est bien net et net:

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

.display-flex {
    display: flex;
}

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

Au-dessus de css dans scss:

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

0 commentaires