Ответ 1

ReactComponent.prototype.isReactComponent = {};

33 из / node_modules/react/lib/ReactComponent.js

Установите с помощью npm. На данный момент нет прямого метода для проверки его действительности. То, что вы делаете, является правильным.

Ответ 2

Если вы действительно хотите ввести проверку для

• компонент vs элемент

• класс vs функциональный компонент

• DOM vs Composite Element

Вы можете попробовать что-то вроде этого.

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

Пример Codepen

Ответ 3

В дополнение к ответу @EmanualJade вы можете использовать это, чтобы проверить, является ли переменная function component

React.isValidElement(Component())

Как отметил @Leonardo, некоторые компиляторы могут привести к сбою:

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

Ответ 4

class Test extends React.Component {}

console.log(!!Test.prototype.isReactComponent);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Ответ 5

Самое простое решение:

React.isValidElement(element)

Ответ 6

Если вы хотите знать, какой у вас класс для конкретного экземпляра объектной переменной, то вам нужен оператор instanceof...

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

Я протестировал оба <someReactJSComponent/> document.createElement('div') (возвращает true) и <someReactJSComponent/> (возвращает false).

instanceof - мощный и полезный инструмент в JavaScript. Ознакомьтесь с официальной документацией по MDN: Mozilla Documentation Network: instanceof

"Оператор instanceof проверяет наличие constructor.prototype в цепочке прототипов объекта".

Кроме того, я загрузил пример кода с песочницей кода онлайн, чтобы продемонстрировать вышеупомянутый принцип...

Онлайн-код Песочница:

https://codesandbox.io/s/kmxjq27ol5

Код:

function App() { return (//insert JSX here//);};
const app = App();
const ele = document.createElement("div");
const rootElement = document.getElementById("root");
ReactDOM.render(app, rootElement);
console.log(
  "Hello!  Is a React Component HTML???" +
    (app instanceof HTMLElement) +
    "|  Is an HTML element HTML???" +
    (ele instanceof HTMLElement) +
    "|"
);

Результаты кода:

Hello!  Is a React Element HTML???false|  Is an HTML element HTML???true|

Нет проблем (проверено Chrome и FF). Просто используйте instanceof.