createElement

const element = createElement(type, props, ...children)

• Başvuru Dokümanı
  • createElement(type, props, ...children)
• Kullanım
  • JSX olmadan öğe oluşturma

Başvuru Dokümanı

createElement(type, props, ...children)

Verilen type, props ve children ile bir React elemanı oluşturmak için createElement çağrısı yapın.

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello'
  );
}

Aşağıda daha fazla örneğe bakın.

Parametreler

• type: type argümanı geçerli bir React bileşen tipi olmalıdır. Örneğin, bir etiket adı dizesi ('div' veya 'span' gibi) veya bir React bileşeni (bir fonksiyon, bir sınıf veya Fragment gibi özel bir bileşen) olabilir.

• props: props bağımsız değişkeni ya bir nesne ya da null olmalıdır. Eğer null geçerseniz, boş bir nesneyle aynı muameleyi görecektir. React, ilettiğiniz props ile eşleşen prop’lara sahip bir eleman oluşturacaktır. Props nesnenizdeki ref ve key öğelerinin özel olduğunu ve döndürülen element üzerinde element.props.ref ve element.props.key olarak kullanılamayacağını *unutmayın. Bunlar element.ref ve element.key olarak mevcut olacaktır.

• isteğe bağlı ...children: Sıfır veya daha fazla alt node. React öğeleri, strings, numbers, portallar, boş node’lar (null, undefined, true ve false) ve React node’larının dizileri dahil olmak üzere herhangi bir React node’u olabilirler.

Returns

createElement, birkaç özelliğe sahip bir React element nesnesi döndürür:

• type: Geçtiğiniz tip.
• props: ref ve key dışında geçirdiğiniz props.
• ref: Geçtiğiniz ref. Eksikse, null.
• key: İlettiğiniz anahtar bir string’e zorlanır. Eksikse, null.

Genellikle, öğeyi bileşeninizden döndürür veya başka bir öğenin alt elemanı yaparsınız. Öğenin özelliklerini okuyabilseniz de, en iyisi her öğeyi oluşturulduktan sonra opak olarak ele almak ve yalnızca render etmektir.

Uyarılar

• React öğelerine ve prop’larına immutable** olarak davranmalı ve oluşturulduktan sonra içeriklerini asla değiştirmemelisiniz. Geliştirme sırasında, React bunu uygulamak için döndürülen öğeyi ve props özelliğini sığ bir şekilde dondurur.

• JSX kullandığınızda, kendi özel bileşeninizi oluşturmak için bir etikete büyük harfle başlamalısınız. Başka bir deyişle, <Something /> createElement(Something) ile eşdeğerdir, ancak <something /> (küçük harf) createElement('something') ile eşdeğerdir (bunun bir dize olduğuna dikkat edin, bu nedenle yerleşik bir HTML etiketi olarak ele alınacaktır).

• Alt elemanları createElement öğesine yalnızca hepsi statik olarak biliniyorsa birden fazla argüman olarak geçirmelisiniz, örneğin createElement('h1', {}, child1, child2, child3). Alt elemanlarınız dinamikse, dizinin tamamını üçüncü bağımsız değişken olarak iletin: createElement('ul', {}, listItems). Bu, React’in herhangi bir dinamik liste için eksik anahtarlar hakkında sizi uyarmasını sağlar. Statik listeler için bu gerekli değildir çünkü asla yeniden sıralanmazlar.

Kullanım

JSX olmadan öğe oluşturma

JSX’i sevmiyorsanız veya projenizde kullanamıyorsanız, alternatif olarak createElement kullanabilirsiniz.

JSX olmadan bir öğe oluşturmak için, createElement öğesini bazı type, props ve children ile çağırın:

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello ',
    createElement('i', null, name),
    '. Welcome!'
  );
}

children isteğe bağlıdır ve ihtiyaç duyduğunuz kadarını geçebilirsiniz (yukarıdaki örnekte üç alt eleman vardır). Bu kod, bir selamlama içeren bir <h1> başlığı görüntüleyecektir. Karşılaştırma için, aynı örnek JSX ile yeniden yazılmıştır:

function Greeting({ name }) {
  return (
    <h1 className="greeting">
      Hello <i>{name}</i>. Welcome!
    </h1>
  );
}

Kendi React bileşeninizi oluşturmak için, 'h1' gibi bir string yerine type olarak Greeting gibi bir fonksiyon geçirin:

export default function App() {
  return createElement(Greeting, { name: 'Taylor' });
}

JSX ile şu şekilde görünecektir:

export default function App() {
  return <Greeting name="Taylor" />;
}

İşte createElement ile yazılmış tam bir örnek:

Ve işte JSX kullanılarak yazılmış aynı örnek:

Her iki kodlama stilinde de sorun yoktur, bu nedenle projeniz için hangisini tercih ederseniz onu kullanabilirsiniz. JSX kullanmanın createElement ile karşılaştırıldığında ana faydası, hangi kapanış etiketinin hangi açılış etiketine karşılık geldiğini görmenin kolay olmasıdır.

// Biraz basitleştirilmiş
{
  type: Greeting,
  props: {
    name: 'Taylor'
  },
  key: null,
  ref: null,
}