从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)

这是我的仪表板组件，当我删除 "概述 "组件时，我不会在控制台中得到这个警告。我试过用 "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>
  );
}

这是我的Overview组件

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 默认情况下有一个 variant body1 它映射到一个 p 标签。

由于您使用的是 Typography 内 TabPanel 进而 Overview 你用 Typograpghy 又导致了嵌套的 p 标签，这在语义上是不正确的，因此出现了警告。

你可以使用组件道具来改变排版的变化，或者完全删除它在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>

Answer 2

其实你是在渲染 children 在 Typography 默认情况下，它将呈现一个 p 标签。在概述中，您使用的是 p 所以在段落中使用段落在语义上是错误的.解决方案:使用其他组件来代替 Typography 或。

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

你也可以用其他html标签来代替div。