Правило ESLint, гарантирующее, что текстовые узлы JSX не смешиваются с другими узлами - PullRequest
1 голос
/ 19 июня 2020

В моем приложении React я заметил несколько ошибок в продакшене, о которых сообщил Sentry. В основном это было: NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.. Я обнаружил, что эти ошибки на самом деле вызваны Google Translate, который возится с React DOM: https://github.com/facebook/react/issues/11538

Итак, теперь, если я хочу, чтобы мое приложение React было более устойчивым к Google Translate и другие плагины, которые изменяют DOM страницы, я хотел бы убедиться, что текстовые узлы никогда не смешиваются с другими узлами. Для этого я ищу правило ESLint, которое:

вызывает ошибку для этого кода :

<div>
  {condition && 'Welcome'}
  <span>Something</span>
</div>

И вместо этого принимает следующий код :

<div>
  {condition && <span>Welcome</span>}
  <span>Something</span>
</div>

Существует ли уже такое правило ESLint? Если нет, знаете ли вы, как построить это правило?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...