isValidElement

const isElement = isValidElement(value)

• Başvuru Dokümanı
  • isValidElement(value)
• Kullanım
  • Bir şeyin React elemanı olup olmadığını kontrol etme

Başvuru Dokümanı

isValidElement(value)

Bir value değerinin React elemanı olup olmadığını kontrol etmek için isValidElement(value) çağrısı yapın.

import { isValidElement, createElement } from 'react';

// ✅ React elemanları
console.log(isValidElement(<p />)); // true
console.log(isValidElement(createElement('p'))); // true

// ❌ React elemanı olmayan değerler
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false

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

Parametreler

• value: Kontrol etmek istediğiniz value değeri. Herhangi bir türde değer olabilir.

Dönüş Değeri

isValidElement, value bir React elemanıysa true döndürür. Aksi takdirde false döndürür.

Uyarılar

• Yalnızca JSX etiketleri ve createElement tarafından döndürülen nesneler React elemanı olarak kabul edilir. Örneğin, 42 gibi bir sayı geçerli bir React node’u olsa da (ve bir bileşenden döndürülebilse de), geçerli bir React elemanı değildir. createPortal ile oluşturulan diziler ve portal’lar da React elemanı olarak kabul edilmez.

Kullanım

Bir şeyin React elemanı olup olmadığını kontrol etme

Bir değerin React elemanı olup olmadığını kontrol etmek için isValidElement çağrısı yapın.

React elemanları şunlardır:

• JSX etiketi yazılarak üretilen değerler
• createElement çağrılarak üretilen değerler

React elemanları için isValidElement, true döndürür:

import { isValidElement, createElement } from 'react';

// ✅ JSX etiketleri React elemanlarıdır
console.log(isValidElement(<p />)); // true
console.log(isValidElement(<MyComponent />)); // true

// ✅ createElement tarafından döndürülen değerler React elemanlarıdır
console.log(isValidElement(createElement('p'))); // true
console.log(isValidElement(createElement(MyComponent))); // true

Dizeler, sayılar veya rastgele nesneler ve diziler gibi diğer tüm değerler React elemanı değildir.

Bunlar için isValidElement, false döndürür:

// ❌ Bunlar React elemanı *değildir*
console.log(isValidElement(null)); // false
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false
console.log(isValidElement([<div />, <div />])); // false
console.log(isValidElement(MyComponent)); // false

isValidElement’e ihtiyaç duymanız oldukça nadir bir durumdur. En çok, yalnızca eleman kabul eden başka bir API çağırdığınızda (cloneElement gibi) ve argümanınız bir React elemanı olmadığında oluşacak hatayı önlemek istediğinizde faydalıdır.

isValidElement kontrolü eklemeniz için çok özel bir nedeniniz olmadıkça, muhtemelen buna ihtiyacınız yoktur.

function MyComponent() {
  // ... herhangi bir React node'u döndürebilirsiniz ...
}

function MyComponent() {
  return 42; // Bir bileşenden sayı döndürmek sorun değildir
}