React Fragment jako blokowy element HTML bez używania dodatkowych divów

<div class="pierwszy">
  <React.Fragment>
  </React.Fragment>
</div>

Czy możliwe aby React.Fragment zachowywał się jako element blokowy bez użycia dodatkowego diva? Chcę aby ten fragment zaczął się od nowej linii bez większego kombinowania (tak aby znajdowal sie pod divem z klasą "pierwszy". Nie chce też tego fragmentu wynosić poza diva z klasą pierwszy.

Nie, ponieważ nie jest to znacznik HTML (https://react.dev/reference/react/Fragment)

mielony711 napisał(a):

Kopiuj

<div class="pierwszy">
  <React.Fragment>
  </React.Fragment>
</div>

Czy możliwe aby React.Fragment zachowywał się jako element blokowy bez użycia dodatkowego diva? Chcę aby ten fragment zaczął się od nowej linii bez większego kombinowania (tak aby znajdowal sie pod divem z klasą "pierwszy". Nie chce też tego fragmentu wynosić poza diva z klasą pierwszy.

A jakbyś więc chciał żeby wynikowy HTML wyglądał? Bo React to nic innego jak biblioteka do UI, która pokazuje widok w HTML'u, więc cokolwiek co react może zrobić, musi się dać zrobić też w samym HTML - więc pytanie do Ciebie - jak chciałbyś żeby wynikowy HTML wyglądał?

Ogólnie React.Fragment to jest tylko interfejs reactowy, żeby grupować kilka komponentów reaktowych w jeden - ale poza reactem ten byt jakby nie istnieje, nie ma specjalnego sensu. React.Fragment ma sens tylko w samym Reacie.

Riddle napisał(a):

mielony711 napisał(a):

Kopiuj

<div class="pierwszy">
  <React.Fragment>
  </React.Fragment>
</div>

Czy możliwe aby React.Fragment zachowywał się jako element blokowy bez użycia dodatkowego diva? Chcę aby ten fragment zaczął się od nowej linii bez większego kombinowania (tak aby znajdowal sie pod divem z klasą "pierwszy". Nie chce też tego fragmentu wynosić poza diva z klasą pierwszy.

A jakbyś więc chciał żeby wynikowy HTML wyglądał? Bo React to nic innego jak biblioteka do UI, która pokazuje widok w HTML'u, więc cokolwiek co react może zrobić, musi się dać zrobić też w samym HTML - więc pytanie do Ciebie - jak chciałbyś żeby wynikowy HTML wyglądał?

Ogólnie React.Fragment to jest tylko interfejs reactowy, żeby grupować kilka komponentów reaktowych w jeden - ale poza reactem ten byt jakby nie istnieje, nie ma specjalnego sensu. React.Fragment ma sens tylko w samym Reacie.

Chcę aby to co by miało znajdować się w React.Fragment znajdowało się pod elementem div, który posiada klasę "pierwszy" i widzę, że prawdopodobnie muszę zrobić drugiego diva zamiast React.Fragment, bo innej opcji nie widzę.

mielony711 napisał(a):

Chcę aby to co by miało znajdować się w React.Fragment znajdowało się pod elementem div, który posiada klasę "pierwszy" i widzę, że prawdopodobnie muszę zrobić drugiego diva zamiast React.Fragment, bo innej opcji nie widzę.

A po co Ci ten React.Fragment? Nie potrzebujesz go przecież w ogóle tutaj.

mielony711 napisał(a):

właśnie chciałem coś zrobić aby nie musieć dodawać diva, ale widzę, że nie ma innej opcji

Wygląda jakbyś sam nie wiedział co chcesz zrobić.

Ogólnie, wybierz sobie jedną z dwóch opcji:

export function Component({}) {
  return <div>
    My first line
    My second line
  </div>
}

export function Component({}) {
  return <React.Fragment>
    My first line
    My second line
  </React.Fragment>
}

Używanie jednocześnie <div> i React.Fragment nie ma sensu.

A jeśli używasz React.Fragment, to możesz to zapisać również tak <>.......</> https://react.dev/reference/react/Fragment

Chodzi o to, żeby second line znajdowało się w nowej linii. A jeśli pierwszy line byłby wąski to second line mogłaby się wyświetlać z boku jakby w nim np. był button lub kilka buttonów, a ja chce żeby second line zawsze wyświetlało się od nowej linii.

mielony711 napisał(a):

Chodzi o to, żeby second line znajdowało się w nowej linii. A jeśli pierwszy line byłby wąski to second line mogłaby się wyświetlać z boku jakby w nim np. był button lub kilka buttonów, a ja chce żeby second line zawsze wyświetlało się od nowej linii.

To możesz użyć <p>, to byłoby najlepsze wyjście. Jak powiedział @LukeJL, zamiast <React.Fragment/> można użyć po prostu <>. To jest po prostu prostszy zapis tego samego.

export function Component({}) {
  return <>
    <p>My first line</p>
    <p>My second line</p>
  </>
}

Gorszym wyjściem byłoby dodanie <br>.

Riddle napisał(a):

mielony711 napisał(a):

Chodzi o to, żeby second line znajdowało się w nowej linii. A jeśli pierwszy line byłby wąski to second line mogłaby się wyświetlać z boku jakby w nim np. był button lub kilka buttonów, a ja chce żeby second line zawsze wyświetlało się od nowej linii.

To możesz użyć <p>, to byłoby najlepsze wyjście. Jak powiedział @LukeJL, zamiast <React.Fragment/> można użyć po prostu <>. To jest po prostu prostszy zapis tego samego.

Kopiuj

export function Component({}) {
  return <>
    <p>My first line</p>
    <p>My second line</p>
  </>
}

Gorszym wyjściem byłoby dodanie <br>

Kopiuj

export function Component({}) {
  return <>
    My first line
    <br/>
    My second line
  </>
}

Tylko w second line będzie docelowo jeden button albo kilka buttonów, więc użycie znacznika p odpada. Czy w takim razie użyć lepiej znacznika br czy po prostu stworzyć drugiego diva za pierwszym divem ?

mielony711 napisał(a):

Tylko w second line będzie docelowo jeden button albo kilka buttonów, więc użycie znacznika p odpada. Czy w takim razie użyć lepiej znacznika br czy po prostu stworzyć drugiego diva za pierwszym divem ?

Wtedy lepiej tak:

export function Component({}) {
  return <>
    <p>My first line</p>
    <button>First</button>
    <button>Second</button>
    <button>Third</button>
  </>
}

Wynik:

Riddle napisał(a):

mielony711 napisał(a):

Tylko w second line będzie docelowo jeden button albo kilka buttonów, więc użycie znacznika p odpada. Czy w takim razie użyć lepiej znacznika br czy po prostu stworzyć drugiego diva za pierwszym divem ?

Wtedy lepiej tak:

Kopiuj

export function Component({}) {
  return <>
    <p>My first line</p>
    <button>First</button>
    <button>Second</button>
    <button>Third</button>
  </>
}

Wynik:

Tyle, że w first line też docelową będą różne elementy, a nie tylko tekst.

mielony711 napisał(a):

Tyle, że w first line też docelową będą różne elementy, a nie tylko tekst.

Powinieneś od początku napisać jaki konkretnie efekt chcesz osiągnąć, co chwila podrzucam nowy kod, a Ty co chwilę dopowiadasz nowe rzeczy.

Następnym razem zacznij od opisania konkretnie jaki efekt chcesz osiągać.

export function Component({}) {
  return <>
    <div>
      <button>First</button>
      <button>Second</button>
      <button>Third</button>
    <div>
    <button>First</button>
    <button>Second</button>
    <button>Third</button>
  </>
}