Material-UI 警告：validateDOMNesting(...): <p> 不能作为 <p> 的后代出现

Question

我正在使用 Material UI，当我点击表格内的 Collapse cmp (Material UI) 时出现此错误：

validateDOMNesting(...): <p> cannot appear as a descendant of <p>. **

我看到了相同的主题，但我没有使用 Typography。 我不知道问题是 Collapse cmp 还是其中的元素

代码如下：

import React from 'react'
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import IconButton from '@material-ui/core/IconButton';
import Collapse from '@material-ui/core/Collapse';
import Box from '@material-ui/core/Box';
import classes from './post.module.scss'
import Button from '@material-ui/core/Button';

export default function PostRow(props) {
    const { row, delatePost, loadProfile, fromProfile } = props;
    const [open, setOpen] = React.useState(false);
    return (
        <React.Fragment>
            <TableRow onClick={() => setOpen(!open)} style={{ borderBottom: 'unset', cursor: 'pointer' }}>
                <TableCell>
                    עוד
                    <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
                        {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
                    </IconButton>

                </TableCell>
                <TableCell align="right">{row.name}</TableCell>
                <TableCell align="right" component="th" scope="row">
                    {row.businessField}
                </TableCell>
                <TableCell align="right">{row.followers}</TableCell>
            </TableRow>
            <TableRow>

                <TableCell style={{ paddingBottom: 0, paddingTop: 0, }} colSpan={6}>
                    <Collapse in={open} timeout="auto" unmountOnExit>
                        <Box margin={0}>
                            <div className={classes.about}>
                                <h4>קצת על העסק</h4>
                                <p>{row.aboutBusiness}
                                    <h4>דרישות</h4>
                                    <p>{row.requirements}</p>
                                </p>
                                {fromProfile &&
                                
                                    <Button variant="contained" color="secondary" style={{marginBottom: '15px'}} onClick={async () => {
                                        await delatePost(row._id)
                                        loadProfile()
                                    }}>מחק פוסט</Button>
                                }
                            </div>
                        </Box>
                    </Collapse>
                </TableCell>
            </TableRow>
        </React.Fragment>
    );
}

Answer 1

谢谢大家，我会阅读这些文章 :) 同时我刚刚删除了 P 元素，它工作得很好。