从 Material UI React 添加 TabPanel 内的组件

Question

我正在尝试使用 material-ui 选项卡创建仪表板组件。我希望在每个选项卡中呈现一个不同的组件，它可以工作，但是当我的页面加载时，我在控制台中多次收到此警告。

index.js:1 Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.
in p (created by ForwardRef(Typography))
in ForwardRef(Typography) (created by WithStyles(ForwardRef(Typography)))
in WithStyles(ForwardRef(Typography)) (at Overview.jsx:10)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at Overview.jsx:9)
in div (created by ForwardRef(Container))
in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
in WithStyles(ForwardRef(Container)) (at Overview.jsx:8)
in Overview (at Dashboard.jsx:78)
in p (created by ForwardRef(Typography))
in ForwardRef(Typography) (created by WithStyles(ForwardRef(Typography)))
in WithStyles(ForwardRef(Typography)) (at Dashboard.jsx:23)
in div (created by Styled(MuiBox))
in Styled(MuiBox) (at Dashboard.jsx:22)
in div (at Dashboard.jsx:14)
in TabPanel (at Dashboard.jsx:77)
in div (at Dashboard.jsx:64)
in Dashboard (created by Route)
in Route (at App.js:37)
in Switch (at App.js:24)
in div (at Layout.jsx:9)
in div (at Layout.jsx:7)
in Layout (at App.js:23)
in App (at src/index.js:13)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:12)

这是我的仪表板组件，当我删除 "Overview" 组件时，我不会在控制台中收到此警告。我尝试用 "div"、"p" 和 <> 包围它，但没有任何效果。

import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import Overview from './Overview';

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role='tabpanel'
      hidden={value !== index}
      id={`vertical-tabpanel-${index}`}
      aria-labelledby={`vertical-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired,
};

function a11yProps(index) {
  return {
    id: `vertical-tab-${index}`,
    'aria-controls': `vertical-tabpanel-${index}`,
  };
}

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
    display: 'flex',
    height: '100%',
  },
  tabs: {
    borderRight: `1px solid ${theme.palette.divider}`,
  },
}));

export default function Dashboard() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <div className={classes.root}>
      <Tabs
        orientation='vertical'
        variant='scrollable'
        value={value}
        onChange={handleChange}
        aria-label='Vertical tabs example'
        className={classes.tabs}
      >
        <Tab label='Overview' {...a11yProps(0)} />
        <Tab label='Pending' {...a11yProps(1)} />
        <Tab label='Declined' {...a11yProps(2)} />
      </Tabs>
      <TabPanel value={value} index={0}>
        <Overview />
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </div>
  );
}

这是我的概览组件

import React from 'react';
import { Typography, Container } from '@material-ui/core';
import Grid from '@material-ui/core/Grid';
import CompanyRequest from './CompanyRequest';

const Overview = () => {
  return (
    <Container>
      <Grid container>
        <Typography>Overview</Typography>
        <CompanyRequest></CompanyRequest>
      </Grid>
    </Container>
  );
};

export default Overview;

提前致谢

Answer 1

实际上，您在 Typography 中呈现 children，默认情况下呈现 p 标记。在概述中，您在某处使用了 p，因此在段落中使用段落在语义上是错误的。解决方案：使用其他组件代替 Typography 或：

<Typography component="div">{children}</Typography>

您也可以使用其他一些 html 标签来代替 div。

Answer 2

Typography 默认有一个 variant body1 映射到 p 标签。

由于您在 TabPanel 中使用 Typography，然后在 Overview 中再次使用 Typograpghy，因此会导致嵌套 p 标记，即语义不正确，因此警告

您可以使用组件属性更改 Typography 的变体，或者完全删除它在 Box 组件中作为子项的用法

<Box p={3}>
      {children}
</Box>

或

  <Box p={3}>
      <Typography component="div"> // use any other tag apart from p as component prop
          {children}
      </Typography>
  </Box>

从 Material UI React 添加 TabPanel 内的组件

Add component inside TabPanel from Material UI React

dom

tabpanel

reactjs

material-ui