Как проверить, является ли объект выводом JSX?

Question

Можно ли проверить, является ли объект JSX, может быть, какая-то функция, которая делает это. Я заинтересован в React и Preact.

var x = <App/>
var y = <div>xxx</div>

Я придумал это:

function isJSX(x) {
   return typeof x.props === 'object' && x.props !== null && typeof x.type !== 'undefined';
}

Есть ли лучший способ? Я не уверен насчет других библиотек, таких как HyperApp и Preact. Надежна ли эта функция? Выход пришел от Бабеля. Есть ли спецификация, показывающая, каким должен быть вывод транспортера JSX?

Вот мое тестирующее перо

Answer 1

Может быть, вам нужно React.isValidElement .

Некоторые тесты из источников React.

Для ReactElement: https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react/src/tests/ReactElement-test.js#L298-L318

Для ReactJSXElement: https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react/src/tests/ReactJSXElement-test.js#L156-L166

Answer 2

jsx в основном синтаксический сахар для React.createElement. Вы можете использовать помощника, предоставленного React, чтобы проверить, является ли данный element действительным

const isValid = React.isValidElement(element)