React warunkowe wyświetlenie elementów html

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

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

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>