ESLint 规则确保 JSX 文本节点不与其他节点混合

Question

在我的 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 规则可以做到这一点？如果没有，你有什么线索来建立这个规则吗？

Answer 1

此 ESLint 规则可以帮助您检测此类情况：eslint-plugin-jsx-expressions - npm。