在使用 React 开发前端应用程序时，偶尔会遇到渲染带有多个表格行（<tr>）的组件的情况。然而，当试图将这些行包含在一个 <div> 元素中时，可能会出现“<tr> 不能作为 <div> 的子元素”这样的错误。
问题描述
以下是一个简单的示例组件，它返回两个表格行：
-------- ------------- -
------ -
-----
-------
-------
----
------- -- ------ ------
------- -- ------ ------
-----
----
------- -- ------ ------
------- -- ------ ------
-----
--------
--------
------
--
-当尝试渲染该组件时，会收到以下错误：
-------- ------------------------ ---- ------ ------ -- - ----- -- ------
这是因为在 HTML 中，<tr> 元素只能是 <thead>、<tbody> 或 <tfoot> 元素的直接子元素。由于 <div> 不属于这些元素之一，因此无法包含 <tr> 元素。
解决方案
为了避免这个错误，我们需要将组件的返回值包装在一个符合 HTML 标准的元素中。在本例中，我们可以使用一个 <>...</> 或 <React.Fragment>...</React.Fragment> 元素来代替 <div>。
-------- ------------- -
------ -
--
-------
-------
----
------- -- ------ ------
------- -- ------ ------
-----
----
------- -- ------ ------
------- -- ------ ------
-----
--------
--------
---
--
-或者：
-------- ------------- -
------ -
----------------
-------
-------
----
------- -- ------ ------
------- -- ------ ------
-----
----
------- -- ------ ------
------- -- ------ ------
-----
--------
--------
-----------------
--
-这两种方法都会创建一个被视为无形式标记包裹的元素，并且不会对任何样式或布局产生影响，因此可以安全地用于包装具有多个表格行的组件。
总结
当你需要渲染带有多个表格行的 React 组件时，避免使用 <div> 包装它们，而是使用一个符合 HTML 标准的元素来代替。可以使用 <>...</> 元素或 <React.Fragment>...</React.Fragment> 元素来包装组件，并避免 "
的子元素"错误。
希望这篇文章能够帮助你解决这个常见的问题！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31383