isValidElement
isValidElement ใฏๅคใ React ่ฆ็ด (React element) ใงใใใใฉใใใๅคๅฎใใพใใ
const isElement = isValidElement(value)ใชใใกใฌใณใน
isValidElement(value)
isValidElement(value) ใๅผใณๅบใใฆใvalue ใ React ่ฆ็ด ใงใใใใฉใใใๅคๅฎใใพใใ
import { isValidElement, createElement } from 'react';
// โ
React elements
console.log(isValidElement(<p />)); // true
console.log(isValidElement(createElement('p'))); // true
// โ Not React elements
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // falseๅผๆฐ
value: ๅคๅฎๅฏพ่ฑกใฎๅคใไปปๆใฎๅใฎๅคใๆๅฎใงใใพใใ
่ฟใๅค
isValidElement ใฏ value ใ React ่ฆ็ด ใงใใใฐ true ใ่ฟใใพใใใใไปฅๅคใฎๅ ดๅใฏ false ใ่ฟใใพใใ
ๆณจๆ็น
- React ่ฆ็ด ใจ่ฆใชใใใใฎใฏใJSX ใฟใฐใจใ
createElementใซใใฃใฆ่ฟใใใใชใใธใงใฏใใ ใใงใใไพใใฐใ42ใฎใใใชๆฐๅคใฏๆๅนใช React ใใผใ (node) ใงใฏใใใพใ๏ผใณใณใใผใใณใใใ่ฟใใใจใใงใใใใ๏ผใใๆๅนใช React ่ฆ็ด ใงใฏใใใพใใใ้ ๅใใcreatePortalใงไฝๆใใใใใผใฟใซใใReact ่ฆ็ด ใจใฏ่ฆใชใใใพใใใ
ไฝฟ็จๆณ
ๅคใ React ่ฆ็ด ใใฉใใใๅคๅฎใใ
isValidElement ใๅผใณๅบใใฆใใใๅคใ React ่ฆ็ด ใงใใใใฉใใใๅคๅฎใใพใใ
React ่ฆ็ด ใจใฏใไปฅไธใฎใใใชใใฎใงใใ
- JSX ใฟใฐใๆธใใใจใซใใฃใฆ็ๆใใใๅค
createElementใๅผใณๅบใใใจใซใใฃใฆ็ๆใใใๅค
React ่ฆ็ด ใซๅฏพใใฆใฏใisValidElement ใฏ true ใ่ฟใใพใใ
import { isValidElement, createElement } from 'react';
// โ
JSX tags are React elements
console.log(isValidElement(<p />)); // true
console.log(isValidElement(<MyComponent />)); // true
// โ
Values returned by createElement are React elements
console.log(isValidElement(createElement('p'))); // true
console.log(isValidElement(createElement(MyComponent))); // trueๆๅญๅใๆฐๅคใใพใใฏไปปๆใฎใชใใธใงใฏใใ้ ๅใชใฉใฎไปใฎๅคใฏใReact ่ฆ็ด ใงใฏใใใพใใใ
ใใใใซๅฏพใใฆใฏใisValidElement ใฏ false ใ่ฟใใพใใ
// โ These are *not* React elements
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)); // falseisValidElement ใๅฟ
่ฆใจใชใใใจใฏ้ๅธธใซ็จใงใใใใใไธปใซๅฝน็ซใคใฎใฏใ่ฆ็ด ใฎใฟใๅใๅ
ฅใใไปใฎ API๏ผไพใใฐ cloneElement ใใใใงใ๏ผใๅผใณๅบใใฆใใใๅผๆฐใ React ่ฆ็ด ใงใชใใใจใซใใใจใฉใผใ้ฟใใใๅ ดๅใงใใ
isValidElement ใฎใใงใใฏใ่ฟฝๅ ใใใใใฎ็นๆฎตใฎ็็ฑใใชใ้ใใใใใใใใใฏๅฟ
่ฆใใใพใใใ
ใใใซๆทฑใ็ฅใ
ใณใณใใผใใณใใๆธใใจใใใใใใใฏไปปๆใฎ React ใใผใ ใ่ฟใใใจใใงใใพใใ
function MyComponent() {
// ... you can return any React node ...
}React ใใผใใจใฏใไปฅไธใฎใใใชใใฎใงใใ
<div />ใcreateElement('div')ใฎใใใซใใฆไฝๆใใใ React ่ฆ็ดcreatePortalใงไฝๆใใใใใผใฟใซ- ๆๅญๅ
- ๆฐๅค
true,false,null,undefined๏ผใใใใฏ่กจ็คบใใใพใใ๏ผ- ไปใฎ React ใใผใใฎ้ ๅ
isValidElement ใฏๅผๆฐใ React ่ฆ็ด ใงใใใใฉใใใๅคๅฎใใพใใใใใใ React ใใผใใงใใใใฉใใใๅคๅฎใใใใใงใฏใใใพใใใไพใใฐใ42 ใฏๆๅนใช React ่ฆ็ด ใงใฏใใใพใใใใใใใใใใฏๅฎๅ
จใซๆๅนใช React ใใผใใงใใ
function MyComponent() {
return 42; // It's ok to return a number from component
}ใใใใฃใฆใไฝใใใฌใณใใผใงใใใใฉใใใใใงใใฏใใๆนๆณใจใใฆใisValidElement ใไฝฟใในใใงใฏใใใพใใใ