反应：警告：validateDOMNesting(...)：空白文本节点不能作为 <tr> 的子节点出现答案

【问题标题】：React: Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tr>反应：警告：validateDOMNesting(...)：空白文本节点不能作为 <tr> 的子节点出现
【发布时间】：2021-03-18 20:26:57
【问题描述】：

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

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

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

js/0.chunk.js:227830:31

【问题讨论】：

您是否正在导入任何可能使用表格元素的第三方模块？如果你在 DOM 树中搜索 <td>，你会找到什么？
@Titulum 不知道，可能我下载的都是 Material-UI 组件。
您能否检查一下您的代码中的某个值是否有空格，例如：<any-tag> {code} </any-tag>，并删除空格，例如：<any-tag>{code}</any-tag>？
@Titulum 是的，我现在正在检查 A TON。没有任何简单的解决方法吗？

标签： javascript html node.js reactjs validation

【解决方案1】：

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

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

<tag> {code} </tag>

到

<tag>{code}</tag>

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

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

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

我不确定是否有 ESlint 规则可以在开发过程中发现这些问题。

【讨论】：