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

Question

我正在使用Material UI，当我点击表格中的折叠组件（Material UI）时出现以下错误：

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

我可以帮您翻译，以下是翻译结果：

我看到了一个相似的主题，但其中包含了排版，而我没有使用它。我不知道问题是Collapse组件还是其中的元素所造成的。

这是代码：

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>
    );
}

- YanivCode

---

问题在这里 <p>{row.aboutBusiness} <h4>要求</h4> <p>{row.requirements}</p> </p>。你在一个<p>标签内有另一个<p>标签。 - undefined

嵌套段落或将标题放在段落内是无效的HTML。不要这样做。请参考https://html.com/semantic-markup。 - undefined

请考虑在您的浏览器中启用（或留意）英文拼写检查器。太多的错误使得您难以理解。 - undefined

这个回答解决了你的问题吗？https://dev59.com/C1gQ5IYBdhLWcg3w-o5w - undefined

Answer 1

谢谢你们，我会阅读这些文章的 :) 与此同时，我刚刚移除了P元素，它现在运行得非常好。

- YanivCode