validateDOMNesting(.)：<tr>不能作为<div>问题的子问题出现
我在我的material-ui项目中使用react.js。当我尝试测试我的Row组件时，我得到了那个console.error
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.下面是我的Row组件：
const Row: React.FC<RowProps> = ({ course }) => {
const [open, setOpen] = useState(false);
const classes = useRowStyles();
const isDesktopOrLaptop = useMediaQuery({
query: '(min-device-width: 992px)',
});
const boxMargin = isDesktopOrLaptop ? 8 : 1;
return (
<>
<TableRow className={classes.root}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}>
{open ? (
<KeyboardArrowUpIcon fontSize="large" />
) : (
<KeyboardArrowDownIcon fontSize="large" />
)}
</IconButton>
</TableCell>
<TableCell component="th" scope="row">
<Typography variant="h5" component="h5">
{course.course}
</Typography>
</TableCell>
<TableCell align="right">
<Typography variant="h5" component="h5">
{course.openedLessonsCount}
</Typography>
</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box marginX={boxMargin} marginY={1}>
<Typography variant="h5" gutterBottom component="h5">
Projects
</Typography>
<Table size="small" aria-label="purchases">
<TableHead>
<TableRow>
<TableCell>
<Typography variant="h6" gutterBottom component="h6">
Name
</Typography>
</TableCell>
<TableCell align="right">
<Typography variant="h6" gutterBottom component="h6">
Completed Lessons
</Typography>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{course.projects &&
course.projects.map((project: IProject) => (
<TableRow key={project.project}>
<TableCell component="th" scope="row">
<Typography variant="body1" gutterBottom>
{project.project}
</Typography>
</TableCell>
<TableCell align="right">
<Typography variant="body1" gutterBottom>
{project.completedLessonsCount}
</Typography>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
</>
);
};下面是为它生成的快照：
<body>
<div>
<tr
class="MuiTableRow-root makeStyles-root-1"
>
<td
class="MuiTableCell-root"
>
<button
aria-label="expand row"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</td>
<th
class="MuiTableCell-root"
role="cell"
scope="row"
>
<h5
class="MuiTypography-root MuiTypography-h5"
>
Course1
</h5>
</th>
<td
class="MuiTableCell-root MuiTableCell-alignRight"
>
<h5
class="MuiTypography-root MuiTypography-h5"
>
3
</h5>
</td>
</tr>
<tr
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root"
colspan="6"
style="padding-bottom: 0px; padding-top: 0px;"
/>
</tr>
</div>
</body>所以看起来问题是<div>元素在<body>中，但是我不知道如何修复这个错误。我用React.Fragment (<>)抓住TableRow的这两个，这样<div>在我看来就不存在了.
我从material-ui文档中获取的可折叠表的material-ui组件：https://material-ui.com/components/tables/
还有它的代码框代码(也来自docs)：https://codesandbox.io/s/material-demo-forked-fnisr?file=/demo.js
@@更新
我不得不用<table>和<tbody>包装Row组件。我为此创建了一个包装器。现在的测试代码是这样的：
const Wrapper: React.FC = ({ children }) => {
return (
<table>
<tbody>{children}</tbody>
</table>
);
};
test('Basic render', () => {
const component = render(
<Wrapper>
<Row course={props} />
</Wrapper>
);
expect(component.baseElement).toMatchSnapshot();
});回答 3
Stack Overflow用户
发布于 2021-06-06 12:24:44
在演示中，行被包装在表头或表主体元素中，您还需要在组件中添加有效的上下文。
tr元素可以使用的上下文
作为一个头目元素的孩子。 作为tbody元素的子元素。 作为脚踏元素的子代。 作为表元素的子元素，在任何标题、colgroup和thead元素之后，但只有在没有tbody元素是表元素的子元素的情况下。
父div不是来自自定义Row组件，而是来自您呈现<Row />的位置。
Stack Overflow用户
发布于 2021-06-06 12:19:36
tr元素必须具有父table元素。因此，用表包装组件将解决这个问题。
tr不能是div元素的后代。
Stack Overflow用户
发布于 2022-10-19 20:29:50
只需用tbody包装组件即可。
例如,
<table>
<tbody>
<tr></tr>
<tr></tr>
</tbody>
</table>https://stackoverflow.com/questions/67858973
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号