文章/答案/技术大牛

发布

社区首页 >问答首页 >警告:validateDOMNesting(.)：<p>不能作为<p>的后代出现

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

Stack Overflow用户

提问于 2022-08-09 11:49:52

回答 1查看 694关注 0票数 2

我有一个反应应用程序，我正在使用MUI。它有两页，让我们说登录和注册。这两个页面都被一个toplevel代码包装：

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

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

return (
    <Grid
      container
      component="div"
      marginTop="10px"
      direction="row"
      alignItems="center"
    >
      <Paper style={paperStyle} elevation={10}>
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="disabled tabs example"
          TabIndicatorProps={{
            style: {
              backgroundColor: "#xxxxxxxx",
            },
          }}
          centered
        >
          <Tab label="Sign In" />
          <Tab label="Sign Up" />
        </Tabs>
        <TabPanel value={value} index={0}>
          <Login handleChange={handleChange} />
        </TabPanel>
        <TabPanel value={value} index={1}>
          <Signup />
        </TabPanel>
      </Paper>
    </Grid>
  );
};

SignIn _ SignUp

单击“登录”按钮后，我将获得上述两页的登录/注册。但是，当单击登录按钮时，我在浏览器的控制台中得到以下警告，但对功能没有影响：

react-dom.development.js:86 
        
    Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.
    at p
    at http://localhost:3000/static/js/bundle.js:6140:66
    at Typography (http://localhost:3000/static/js/bundle.js:46766:87)
    at div
    at http://localhost:3000/static/js/bundle.js:6140:66
    at Toolbar (http://localhost:3000/static/js/bundle.js:45655:82)
    at header
    at http://localhost:3000/static/js/bundle.js:6140:66
    at Paper (http://localhost:3000/static/js/bundle.js:40510:82)
    at http://localhost:3000/static/js/bundle.js:6140:66
    at AppBar (http://localhost:3000/static/js/bundle.js:25701:83)
    at div
    at http://localhost:3000/static/js/bundle.js:6140:66
    at Grid (http://localhost:3000/static/js/bundle.js:33861:87)
    at Login (http://localhost:3000/static/js/bundle.js:3249:5)
    at p
    at http://localhost:3000/static/js/bundle.js:6140:66
    at Typography (http://localhost:3000/static/js/bundle.js:46766:87)
    at div
    at http://localhost:3000/static/js/bundle.js:6140:66
    at Box (http://localhost:3000/static/js/bundle.js:50403:72)
    at div
    at TabPanel (http://localhost:3000/static/js/bundle.js:311:7)
    at div
    at http://localhost:3000/static/js/bundle.js:6140:66
    at Paper (http://localhost:3000/static/js/bundle.js:40510:82)
    at div
    at http://localhost:3000/static/js/bundle.js:6140:66
    at Grid (http://localhost:3000/static/js/bundle.js:33861:87)
    at SignInOutContainer (http://localhost:3000/static/js/bundle.js:348:74)
    at Routes (http://localhost:3000/static/js/bundle.js:108594:5)
    at Router (http://localhost:3000/static/js/bundle.js:108527:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:107336:5)
    at App (http://localhost:3000/static/js/bundle.js:73:56)
    at AuthContextProvider (http://localhost:3000/static/js/bundle.js:5226:5)
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
validateDOMNesting @ react-dom.development.js:10849
createInstance @ react-dom.development.js:10930
completeWork @ react-dom.development.js:22187
completeUnitOfWork @ react-dom.development.js:26596
performUnitOfWork @ react-dom.development.js:26568
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

类似地，在代码的不同部分中总共可以看到5个警告。我尝试通过组件定义span，但仍然没有改进：

react-dom.development.js:86   
Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.        
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
Warning: validateDOMNesting(...): <header> cannot appear as a descendant of <p>.    
Warning: validateDOMNesting(...): <h2> cannot appear as a descendant of <p>.
Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <p>.

登录代码如下所示：

  return (
    <Grid container direction="row" alignItems="center">
      <AppBar color="inherit" position="fixed">
        <Toolbar>
          <NavLink to="/" style={{ textDecoration: "none" }}>
            <Box
              component="img"
              src={devicon}
              width="30px"
              height="30px"
              paddingRight={1}
              paddingTop={0.8}
            />
          </NavLink>
          <Typography
            color="green"
            flexGrow={1}
            fontWeight="bold"
            display="flex"
            sx={{
              alignSelf: "center",
              fontSize: { xs: "1.125rem", sm: "2.125rem" },
            }}
          >
            devplatform
          </Typography>
          <Stack spacing={1} direction="row">
            <Button
              variant="outlined"
              color="success"
              size="small"
              href="/login"
            >
              Login
            </Button>
            <Button
              variant="contained"
              color="success"
              size="small"
              href="/signup"
            >
              Sign Up
            </Button>
          </Stack>
        </Toolbar>
      </AppBar>
      <Grid
        container
        component="span"
        direction="row"
        alignItems="center"
      >
        <Paper style={paperStyle}>
          <Grid align="center">
            <Avatar style={avatarStyle}>
              <LockOutlinedIcon />
            </Avatar>
            <h2 style={headerStyle}>Member Login</h2>
          </Grid>
          <Formik initialValues={initialValues}>
            {(props) => (
              <Form onSubmit={handleLogin}>
                <span className="uname">
                  <Field
                    as={TextField}
                    label="Username"
                    name="email"
                    placeholder="Enter Username"
                    variant="standard"
                    fullWidth
                    required
                    color="success"
                    helperText={<ErrorMessage name="email" />}
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                  />
                </span>
                <span className="passwd">
                  <Field
                    as={TextField}
                    label="Password"
                    name="password"
                    placeholder="Enter Password"
                    variant="standard"
                    type="password"
                    fullWidth
                    required
                    color="success"
                    autoComplete="off"
                    helperText={<ErrorMessage name="password" />}
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                  />
                </span>
                <span className="login-remember">
                  <Field
                    as={FormControlLabel}
                    name="remember"
                    control={<Checkbox color="success" />}
                    label="Remember me"
                  />
                </span>
                <span className="signin-button">
                  <Button
                    variant="contained"
                    type="submit"
                    color="success"
                    style={btnStyle}
                    fullWidth
                    disabled={props.isSubmitting}
                  >
                    {props.isSubmitting ? "Loading" : "Sign In"}
                  </Button>
                  {error && (
                    <span className="span">Wrong email or password</span>
                  )}
                </span>
              </Form>
            )}
          </Formik>
          <span className="endcontent">
            <Typography
              component={'div'}
              sx={{ fontFamily: "Roboto, sans-serif", marginTop: "25px" }}
            >
              <Link href="/forget-password"> Forgotten password?</Link>
            </Typography>
            <Typography
              component={'div'}
              sx={{ fontFamily: "Roboto, sans-serif" }}
            >
              {" "}
              New to this domain ?{" "}
              <Link onClick={() => handleChange("event", 1)}>Join now </Link>
            </Typography>
          </span>
        </Paper>
      </Grid>
    </Grid>
  );

知道怎么解决这个问题吗？

reactjs

react-native

material-ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-09 13:30:13

@大卫，谢谢你解释流程。我把零钱放错地方了。

在component={"div"}函数中添加TabPanel之后，它也开始工作了。

工作守则是：

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

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73291309

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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