警告：validateDOMNesting（...）： <p>不能作为<p>的后代出现。

Question

我有一个React应用程序，其中使用了MUI。它有两个页面，比如登录和注册。这两个页面都被一个顶层代码包裹：

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

登录 | 注册

点击登录按钮后，我会得到上面这两个页面以进行登录/注册。但是，在点击登录按钮时，虽然没有影响其功能，但我会在浏览器控制台中收到以下警告：

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个警告。 我尝试通过组件定义标签，但仍然没有改善：

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

有什么办法可以解决这个问题吗？

- Udayendu

---

你的选项是 (1) 更正标记或 (2) 禁用警告并继续使用不正确的标记。你想要做什么？在尝试中你已经做了什么？ - David

我想和(1)一起修复标记。但是怎么做呢？我在很多地方都检查过了，发现这是React本身的问题，必须由维护者自己修复。正如https://dev59.com/C1gQ5IYBdhLWcg3w-o5w所述，我已经尝试过了，但仍然是同样的问题。 - Udayendu

通过编辑标记，使<p>不是<p>的后代（类似于其他警告）。在您的组件结构中的某个地方，您错误地使用了<p>或呈现为<p>的组件作为更复杂内容的占位符。这是无效的。<p>是一个段落。它的意思是容纳一段文本。编辑您的标记以反映这一点。 - David

@Udayendu：根据所示代码，这是一个有趣的问题。请注意，在所示代码中，<Login>是<TabPanel>的直接子元素。但在错误中，从父级到子级的结构为：TabPanel -> div -> Box -> div -> Typography -> p -> Login。问题在于该层次结构中的<p>。但我没有从所示代码中看到它是如何插入该结构中的。除非在此处未显示的<TabPanel>中发生了某些自定义？这可能需要您进行更多的调试。 - David

感谢@Akis指出渲染问题。包装器出了点问题，但现在已经解决了 :) - Udayendu

Answer 1

@David，感谢您解释流程。 我把更改应用到了错误的位置。

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

可工作的代码如下：

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

- Udayendu