如何检查元素是不是有效 JSX

Posted 2023-02-21

【中文标题】如何检查元素是不是有效 JSX

【英文标题】：How to check if element is valid JSX如何检查元素是否有效 JSX

【发布时间】：2020-02-21 21:02:29

【问题描述】：

是否有可能检查对象是否是 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 等其他库。这个功能可靠吗？输出来自 Babel。是否有说明 JSX 转译器的输出应该是什么的规范？

这是我的testing Pen

【问题讨论】：

既然您正在检查props 的存在，也许React.isValidElement 可以帮助您。

@Dupocas 非常完美，您可以将其添加为答案。我认为只有 React 就足够了。

【参考方案1】：

jsx 主要是React.createElement 的语法糖。您可以使用 React 提供的帮助器 isValidElement 来检查给定的 element 是否有效。

const isValid = React.isValidElement(element)

【参考方案2】：

也许你需要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