API Referansı
Bileşenler

<Fragment> (<>...</>)

<Fragment>, genellikle <>...</> sözdizimiyle birlikte kullanılır ve bir kaplayıcı düğüm olmadan elemanları gruplamaya olanak tanır.

<>
  <AltEleman />
  <BaskaAltEleman />
</>

Referans

<Fragment>

Tek bir elemana ihtiyaç duyduğunuz durumlarda, elemanları <Fragment> içine alarak onları bir araya getirebilirsiniz. Fragment içinde elemanları gruplamak, sonuç DOM üzerinde herhangi bir etkiye sahip değildir; sanki elemanlar gruplanmamış gibi aynı kalır. Boş JSX etiketi <></> çoğu durumda <Fragment></Fragment> için kısaltmadır.

Prop’lar

isteğe bağlı anahtar: Açık <Fragment> sözdizimiyle tanımlanan Fragment’ler anahtara sahip olabilir.

Uyarılar

  • Eğer bir Fragment’a key değeri geçirmek istiyorsanız, … sözdizimini kullanamazsınız. ‘React’ten Fragment’ı içe aktarmanız ve <Fragment key={anahtar}>...</Fragment> şeklinde render etmeniz gerekmektedir.

  • React, <><AltEleman /></>’dan [<AltEleman />]’a veya geriye dönerken, ya da <><AltEleman /></>’dan <AltEleman />’a ve geriye dönerken state sıfırlamaz. Bu durum yalnızca tek seviye derinlikte çalışır: örneğin, <><><AltEleman /></></>’dan <AltEleman />’a geçmek durumu sıfırlar. Kesin anlamları burada görebilirsiniz.

Kullanım

Birden Fazla Eleman Döndürme

Fragment veya, <>...</> sözdizimini kullanmak birden fazla elemanı bir araya getirir. Tek bir elemanın gidebileceği herhangi bir yere birden fazla eleman koymak için kullanabilirsiniz. Örneğin, bir bileşen sadece bir eleman döndürebilir, ancak Fragment kullanarak birden fazla elemanı bir araya getirebilir ve onları bir grup olarak döndürebilirsiniz:

function Post() {
  return (
    <>
      <PostTitle />
      <PostBody />
    </>
  );
}

Fragmanlar kullanışlıdır çünkü bir Fragment ile elemanları gruplamak, elemanları bir DOM elemanı gibi başka bir konteynerde sarmak gibi düzeni veya stilleri etkilemez. Tarayıcı araçlarıyla bu örneği incelediğinizde, tüm <h1> ve <p> DOM düğümlerinin etrafında sarmalayıcı olmadan kardeşler olarak görünecektir.

export default function Blog() {
  return (
    <>
      <Post title="An update" body="It's been a while since I posted..." />
      <Post title="My new blog" body="I am starting a new blog!" />
    </>
  )
}

function Post({ title, body }) {
  return (
    <>
      <PostTitle title={title} />
      <PostBody body={body} />
    </>
  );
}

function PostTitle({ title }) {
  return <h1>{title}</h1>
}

function PostBody({ body }) {
  return (
    <article>
      <p>{body}</p>
    </article>
  );
}
Derinlemesine İnceleme

Özel sözdizimi olmadan bir Fragment nasıl yazılır?

Yukarıdaki örnek, React’ten Fragment içe aktarmaya eşdeğerdir:

import { Fragment } from 'react';

function Post() {
  return (
    <Fragment>
      <PostTitle />
      <PostBody />
    </Fragment>
  );
}

Genellikle bunun gibi bir şeye ihtiyaç duymazsınız, ancak [Fragment’a key eklemek] istediğinizde kullanabilirsiniz.(#rendering-a-list-of-fragments)

Bir değişkene birden fazla eleman atama

Diğer tüm elemanlar gibi, Fragment elemanlarını değişkenlere atayabilir, bunları props olarak iletebilir ve benzeri işlemler yapabilirsiniz:

function CloseDialog() {
  const buttons = (
    <>
      <OKButton />
      <CancelButton />
    </>
  );
  return (
    <AlertDialog buttons={buttons}>
      Are you sure you want to leave this page?
    </AlertDialog>
  );
}

Metinle elemanları gruplama

Fragment ile, metni bileşenlerle bir araya getirmek için kullanabilirsiniz:

function DateRangePicker({ start, end }) {
  return (
    <>
      From
      <DatePicker date={start} />
      to
      <DatePicker date={end} />
    </>
  );
}

Fragment’lar listesini oluşturma:

İşte <></> sözdizimini yerine Fragment yazmanız gereken bir durum. Bir döngüde birden fazla elemanı oluşturduğunuzda, her elemana bir key atamanız gerekmektedir. Eğer döngü içindeki elemanlar Fragment ise, key özelliğini sağlamak için normal JSX eleman sözdizimini kullanmanız gerekir:

function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

DOM’u, Fragment alt elemanlarının etrafında sarmalayıcı öğe olmadığını doğrulamak için inceleyebilirsiniz:

import { Fragment } from 'react';

const posts = [
  { id: 1, title: 'An update', body: "It's been a while since I posted..." },
  { id: 2, title: 'My new blog', body: 'I am starting a new blog!' }
];

export default function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

function PostTitle({ title }) {
  return <h1>{title}</h1>
}

function PostBody({ body }) {
  return (
    <article>
      <p>{body}</p>
    </article>
  );
}
PreviousBileşenler
Next<Profiler>