Tuesday, May 15, 2018

How to detect a React component vs. a React element?

By Hường Hana 5:30 AM , Leave a Comment

React.isValidElement tests true for both React components as well as React elements. How would I test, specifically, that an object is a React component? Currently, I'm doing it by testing typeof obj.type === 'function', but I'm hoping there's a better way.

4 Answers

Answers 1

ReactComponent.prototype.isReactComponent = {};

33 of /node_modules/react/lib/ReactComponent.js

Install using npm. At this point, there is no direct method available to check for its validity. What you are doing is correct.

Answers 2

If you really want to type check for

  • component vs element

  • class vs functional component

  • DOM vs Composite Element

You could try something like this.

function isClassComponent(component) {     return (         typeof component === 'function' &&          !!component.prototype.isReactComponent     ) ? true : false }  function isFunctionComponent(component) {     return (         typeof component === 'function' &&          String(component).includes('return React.createElement')     ) ? true : false; }  function isReactComponent(component) {     return (         isClassComponent(component) ||          isFunctionComponent(component)     ) ? true : false; }  function isElement(element) {     return React.isValidElement(element); }  function isDOMTypeElement(element) {     return isElement(element) && typeof element.type === 'string'; }  function isCompositeTypeElement(element) {     return isElement(element) && typeof element.type === 'function'; }

USE

// CLASS BASED COMPONENT class Foo extends React.Component {   render(){       return <h1>Hello</h1>;   } }  const foo = <Foo />;  //FUNCTIONAL COMPONENT function Bar (props) { return <h1>World</h1> } const bar = <Bar />;  // REACT ELEMENT const header = <h1>Title</h1>;  // CHECK isReactComponent(Foo); // true isClassComponent(Foo); // true isFunctionComponent(Foo); // false isElement(Foo); // false  isReactComponent(<Foo />) // false isElement(<Foo />) // true isDOMTypeElement(<Foo />) // false isCompositeTypeElement(<Foo />) // true  isReactComponent(Bar); // true isClassComponent(Bar); // false isFunctionComponent(Bar); // true isElement(Bar); // false  isReactComponent(<Bar />) // false isElement(<Bar />) // true isDOMTypeElement(<Bar />) // false isCompositeTypeElement(<Bar />) // true  isReactComponent(header); // false isElement(header); // true isDOMTypeElement(header) // true isCompositeTypeElement(header) // false

Example Codepen

Answers 3

In addition to @EmanualJade answer, you can use this to check if a variable is a function component

React.isValidElement(Component())

As @Leonardo has pointed out, some compilers can cause this to fail:

String(component).includes('return React.createElement')

Answers 4

I was really hoping for something simple. After poking around for a while, I finally came up with this...

function isHTMLElement(obj) {     return (obj instanceof HTMLElement); }

I tested with both document.createElement('div') (returns true) and <someReactJSComponent /> (returns false).

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment