反应：警告：validateDOMNesting（...）：空白文本节点不能作为子节点出现

Question

所以我弹出这个关于剩余空格的错误。我试图在堆栈中找到答案，但我的项目中实际上没有一个或任何表格元素，因为我使用的是 React 和 Material-UI。 我还收到另一个类似的错误，如下所示：

Warning: validateDOMNesting(...): <td> cannot appear as a child of <tfoot>.

我又在我的项目中找不到任何或。 我的错误选项卡已填满，每个错误都有一个相同的依赖项，即：

js/0.chunk.js:227830:31

Answer 1

似乎 React 抱怨 JSX 标签中大括号周围的空格。 在某处，其中一个 JSX 标记实际上是<td>标记，但由于它是第三方元素，您无法轻易看到它在幕后是什么标记。

因此，您将不得不更改以下所有代码：

<tag> {code} </tag>

至

<tag>{code}</tag>

解决此问题的最简单方法是在所有具有 JSX 文件扩展名的文件中进行全局替换：

• > {到>{
• } </到}</

但这很容易被破坏，因为它在某些地方可能是有效的代码。

我不确定在开发过程中是否有 ESlint 规则来捕捉这些问题。