组件类型判断

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';

}

// 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