当前位置: 博客 /  ReactJs  / 运行React.js警告: validateDOMNesting 警告

运行React.js警告: validateDOMNesting 警告

问题

使用React.js做项目,table的tbody使用循环渲染,但是控制台报出Warning: validateDOMNesting(…): Whitespace text nodes cannot appear as a child of <tbody>. Make sure you don’t have any extra whitespace between tags on each line of your source code.

解决方法

1. 检查引用变量

引用变量时,不要在变量前后加空格:

正确:<tbody>{tablecell}</tbody>

错误:<tbody> {tablecell} </tbody>

2. 检查定义变量

定义变量时定义为null,不要定义为空字符串:

正确:let tablecell = null;

错误:let tablecell = "";

3. 检查变量中的注释

在使用循环渲染时添加了注释也会导致这个问题:

正确:

<tr>
  <th>Name</th>
</tr>

错误:

<tr>
  <th>Name</th> {/* 注释 */}
</tr>

- END -