正则表达式查找具有给定属性的 React JSX 元素？答案

【问题标题】：Regex to find React JSX element with a given property?正则表达式查找具有给定属性的 React JSX 元素？
【发布时间】：2019-07-27 11:10:53
【问题描述】：

我正在对大型代码库进行审核，我需要搜索以找到与给定道具一起使用的组件的所有用途。我认为正则表达式在这里可能很有用，但我不知道如何处理标记中潜在的换行符。我需要能够区分这两种用法，找到后者：

<Component
  prop1="value1"
  prop2={2}
/>

<Component
  prop1="value1"
  targetProp={3}
  prop2={2}
/>

我不关心目标 prop 的值，只关心它存在于组件上。

【问题讨论】：

【解决方案1】：

&lt;Component(\s|\n)[^&gt;]*?property

这个支持换行。

【讨论】：

同意，您的解决方案更好！谢谢！
如果我的组件看起来像这样：<Component icon={<Icon />} property={1} /> - 正则表达式失败，因为内部 <Icon />！你能创建一个正则表达式来支持它吗？ :)
如果给定的解决方案在另一个组件的属性中遇到>，不幸的是会中断：箭头函数 {}} property={1} /> 和组件作为道具} property={1} /> 有谁知道是否可以增强 RegExp 以跟踪这些？

【解决方案2】：

这是一个应该可以工作的正则表达式：

<Component\s[^>]*?targetProp={[^>]*?\/>

这匹配：

【讨论】：