时间戳

首页 > 解决方案 > ESLint 规则确保 JSX 文本节点不与其他节点混合

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

问题描述

在我的 React 应用程序中，我注意到 Sentry 报告了多个生产错误。主要是：NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.。我发现这些错误实际上是由与 React DOM 混淆的谷歌翻译引起的：https ://github.com/facebook/react/issues/11538

所以现在，如果我希望我的 React 应用程序对谷歌翻译和其他改变页面 DOM 的插件更具弹性，我想确保文本节点永远不会与其他节点混合。为此，我正在寻找一个 ESLint 规则：

为此代码引发错误：

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

相反，接受以下代码：

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

是否已经有一个 ESLint 规则可以做到这一点？如果没有，你有什么线索来建立这个规则吗？

标签： javascriptreactjseslint

解决方案

推荐阅读