Блог

Главная - Вопросы по программированию - Регулярное выражение для поиска элемента React JSX с заданным свойством?

Регулярное выражение для поиска элемента React JSX с заданным свойством?

#javascript #regex #reactjs #jsx

#javascript #регулярное выражение #reactjs #jsx

Вопрос:

Я провожу аудит в большой кодовой базе, и мне нужно выполнить поиск, чтобы найти все варианты использования компонента, где он используется с заданным prop. Я думаю, что регулярное выражение могло бы быть полезным здесь, но я не могу понять, как обрабатывать потенциальные новые строки в разметке. Мне нужно уметь различать эти два использования, находя последнее:

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

Меня не волнует значение целевого prop, просто то, что оно существует в компоненте.

Ответ №1:

 <Component(s|n)[^>]*?property

Это поддерживает разрыв строки.

Комментарии:

1. Согласен, ваше решение лучше! Спасибо!

2. Что, если мой компонент выглядит следующим образом: <Component icon={<Icon />} property={1} /> — регулярное выражение завершается ошибкой из-за внутреннего <Icon /> ! Можете ли вы создать регулярное выражение для поддержки и этого? 🙂

3. К сожалению, данное решение ломается, если оно встречает > в свойстве другого компонента: функции со стрелками <Компонент onClick={() =>{}} property={1} /> и компоненты в качестве реквизитов <Значок компонента = {<Значок />} property = {1} /> Кто-нибудь знает, возможно ли улучшить регулярное выражение, чтобы отслеживать их?

4. <Поле(n. ) свойство

Ответ №2:

Вот регулярное выражение, которое должно работать:

<Components[^>]*?targetProp={[^>]*?/>

Это соответствует:

  • <Component буквально, с s пробелом, чтобы избежать захвата <ComponentWithALongerName
  • [^>] любой символ, который не > , равен нулю или более раз, лениво
  • targetProp={ буквально (при необходимости скорректируйте для логических / строковых значений)
  • [^>] любой символ, который не > , равен нулю или более раз, лениво
  • /> буквально