reactjs - 如何在 ReactJS 中使用 TransitionGroup 和 Material UI 表为表项条目设置动画

Question

我遇到了一个问题，我似乎无法TransitionGroup使用Material UI ReactJS图书馆

我的期望很简单，进入表格后，该行应该像滑入表格一样动画。

我尝试了以下方法，但这最终只会分散表格，标题和所有东西都变形了。

这是我尝试使用该Material UI库的内容ReactJS

                   <TableContainer>
                        <Table aria-label="stats-table">
                            <TableHead>
                                <TableRow>
                                   {...}
                                </TableRow>
                            </TableHead>
                            <TransitionGroup
                                transitionName="fade"
                                transitionEnterTimeout={1000}
                                transitionLeaveTimeout={300}
                                transitionAppearTimeout={1000}
                                transitionAppear={true}
                                component="tbody">
                                <TableBody>
                                    {
                                        (rowsPerPage > 0 ? games.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : games
                                        ).map((row: Game) => (
                                            <SimpleTableRow row={row} key={row.id}/>
                                        ))}
                                    {
                                        emptyRows > 0 && (
                                            <TableRow style={{height: 53 * emptyRows}}>
                                                <TableCell colSpan={6}/>
                                            </TableRow>
                                        )
                                    }
                                </TableBody>
                            </TransitionGroup>
                   </TableContainer>

在我添加 TransitionGroup 的那一刻，整个表头和表体变得分散。

我怎样才能使这项工作？谢谢

标签： reactjsmaterial-ui

Answer 1

你可以尝试通过component={null}代替component="tbody"。