• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

React warunkowe wyświetlenie elementów html

VPS Starter Arubacloud
0 głosów
306 wizyt
pytanie zadane 22 października 2020 w JavaScript przez User007 Bywalec (2,400 p.)

Witam.

Mam taki oto kod:

<div>
<dt>Cars</dt>
<dd>
 {cars.map(car => (
       <span
       key={car.id}
        >
       {car.name}
       </span>
 ))}
</dd>

 <dt>Tags</dt>
 <dd>
        {tags.map(tag => (
             <span
              key={tag.id}
                >
               {tag.name}
                </span>
           ))}
</dd>
<div>

I chciałbym wyświetlić "cars" dd i dt tylko jeśli cars tablica nie jest pusta i tak samo dla tags.

Wiem że mógłbym napisać coś takiego:

{tags.length > 0 && <dt>tags</dt> }

Ale jeśli bym chciał połączyć parę elementów html znacznikiem && to wyświetli mi tylko ostatni znacznik html.

Jak mogę wyświetlić parę elementów html nie zamkniętych w jednym elemecie div warunkowo?

Dziękuję.,

komentarz 22 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

Jak mogę wyświetlić parę elementów html nie zamkniętych w jednym elemecie div warunkowo?

A dlaczego nie możesz tych dwóch elementów zamknąć właśnie w jeden lub zrobić z nich komponent?

komentarz 22 października 2020 przez User007 Bywalec (2,400 p.)

Mogę, mogę zamknąć to w div, ale chodzi mi o ten specyficzny przypadek. Jak się nie da zamknąć dd i dt w coś na kształt

if(tabs.length > 0) {
return (<dt></dt> <dd></dd>)
}

to taka odpowiedź mi wystarczy. Czyli innymi słowami"Panie tego się tak nie da, musisz to mieć w jednym zewnętrzym kontenerze".

To taka odpowiedź mnie satysfakcjonuje :)

komentarz 22 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

To już dostałeś odpowiedzi poniżej: użyj React.Fragment.

komentarz 22 października 2020 przez User007 Bywalec (2,400 p.)
Widzę i tak zrobię.

2 odpowiedzi

+1 głos
odpowiedź 22 października 2020 przez Ilya Dimow Obywatel (1,240 p.)
wybrane 22 października 2020 przez User007
 
Najlepsza

Jak mogę wyświetlić parę elementów html nie zamkniętych w jednym elemecie div warunkowo?

Możesz to zrobić przez React.Fragment https://reactjs.org/docs/fragments.html 

komentarz 22 października 2020 przez User007 Bywalec (2,400 p.)
Dzięki
0 głosów
odpowiedź 22 października 2020 przez DawidK Nałogowiec (37,910 p.)

Z tego kodu nie do końca rozumiem, czy chcem mieć tablice cars i drugą tags czy tablice obiektów cars które mają swoje tagi (to rozwiązanie wydaje mi się bardziej logiczne). Z kodu wynika bardziej, że chodzi o dwie niezależne tablice.

Wyświetlanie warunkowe możesz zrobić np w ten sposób (pewnie da się to zrobić bardziej elegancko). Przykład na podstawie pliku z importem bibliotek ze strony reacta (po prostu jest to prostrze do przesłania niż create react app.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Cars</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">

    const cars = ['Mercedes', 'Volksvagen', 'BMW', 'Audi', 'Ford', 'Opel', 'Skoda'];
    const tags = [];

    const List = (props) => {
      const { array, name } = props;
      const list = array.map((element, index) => (
        <span key={index}> {element} </span>
      ));
      return (
        <>
          <p>{name}</p>
          {array.length > 0 ? list : null}
        </>
      )
    }

    const App = () => {
      return (
        <>
          <List array={cars} name='cars' />
          <List array={tags} name='tags' />
        </>
      )
    }

    ReactDOM.render(
      <App />,
      document.getElementById('root')
    );

  </script>
</body>

</html>

 

Podobne pytania

0 głosów
1 odpowiedź 90 wizyt
pytanie zadane 14 maja 2020 w JavaScript przez poldeeek Mądrala (5,980 p.)
0 głosów
1 odpowiedź 164 wizyt
pytanie zadane 13 lutego 2020 w JavaScript przez poldeeek Mądrala (5,980 p.)
+1 głos
2 odpowiedzi 272 wizyt
pytanie zadane 23 lipca 2022 w JavaScript przez Sic Dyskutant (8,510 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...