【已解决】Warning: validateDOMNesting(...): ＜div＞ cannot appear as a descendant of ＜p＞

已于 2023-05-19 09:33:46 修改
阅读量2.1k 收藏 1
点赞数 1
文章标签： react
于 2022-08-01 15:21:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32682301/article/details/126101773
版权

文章目录

问题

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

在这里插入图片描述

解决

p标签内只能包裹内联元素, 不能包裹块级元素.

两种解决方式：

  • 不用 p 标签
  • p 标签内使用内联元素

我这里组件是引用第三方的，不便修改，直接修改外部标签 p => div

over

react项目中遇到的bug
Azhangyuaner的博客
10-23 953
1、react-router使用时，在浏览器出错：Attempted import error: 'Link' is not exported from 'react-router 源代码如下： import React, { Component } from 'react'; import {Menu} from 'semantic-ui-react'; import 'semant...
React + Ant Design 4 使用过程中问题搜集
FreedomX20的博客
04-16 6342
React 和 Ant Design 使用过程中问题搜集
Warning: validateDomNexting(...): ＜div＞cannot appear as a descendant of ＜p＞
Coralpapy的博客
11-12 2681
Warning: validateDomNexting(...): <div>cannot appear as a descendant of <p> 原因分析： 报错显示，<p>标签不能作为<div>标签的父标签。但是如果发现自己整张代码都没有所谓的<p>标签，还是报错。那就可以考虑是否运用了一些封装好的组件，里面是用p标签写的。例如antd的result组件，description属性里用<div>就会报错，解决方法是可.
Warning: validateDOMNesting(...): ＜div＞ cannot appear as a descendant of ＜p＞
朱远辉的博客
03-14 431
Warning: validateDOMNesting(...): cannot appear as a descendant of
React Warning: validateDOMNesting(...): ＜div＞ cannot appear as a descendant of ＜p＞.
Codernmx
08-02 3531
报错信息 umi.js:68474 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. 其实不难看出是它提示 你应该在div标签中写一个select这里造成错误的原因就是 p标签内只能包裹内联元素, 不能包裹块级元素. 写了一堆拉胯代码？？？ 告辞！！！！ ...
p标签包裹div标签结构导致的报错：＜div＞ cannot appear as a descendant of ＜p＞
cautionHua的博客
09-23 3263
接手了上任的工作后，发现不少的问题，在control中爆出了这样一大片的错误，找到对应位置后，仔细一看发现是p标签内包了很多的div标签，这还得了，直接随手就改了。 devScripts.js:5836 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. in div (at PieCharts.tsx:277) in p (at PieCharts.tsx:269
validateDOMNesting(...): ＜div＞ cannot appear as a descendant of ＜p＞
热门推荐
前端一线搬运工的博客
09-30 1万+
解决办法: p标签内只能包裹内联元素, 不能包裹块级元素. 原因: 拓展: stackoverflow的解答
react-dom.development.js:86 Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
09-15
2. 使用其他标签替代<a>标签：如果需要在<a>标签内部嵌套链接，可以考虑使用其他标签，例如<span>或<div>来实现相同的效果。 3. 将嵌套的<a>标签拆分为独立的组件：如果确实需要使用嵌套的<a>标签，可以将其拆分为...
Warning:validateDOMNesting(...):＜p＞ cannot as a descendant of ＜p＞ 报错解决
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
12-07 2745
报错信息: Warning:validateDOMNesting(...):<p> cannot as a descendant of <p> 报错截图: 这个错误主要就是 html 标签 写法不规范引起的： p标签内只能包裹内联元素, 不能包裹块级元素 ， 代码里出现了 p标签 包裹 块元素的现象 。 比如 ： <p> <p></p> </p> <p> <div></div.
react Warning: validateDOMNesting(...): ＜p＞ cannot appear as a descendant of ＜p＞.
weixin_46353030的博客
06-10 4312
react 在解析dom元素的时候，解析出来的结果如下所示： 而对于p标签，只能包裹内联元素, 不能包裹块级元素。修改p标签内的html元素为内联元素
Day 273/300 validateDOMNesting(...): ＜div＞ cannot appear as a descendant of ＜p＞.
xinghuowuzhao的博客
06-19 118
报错是提示说，p标签下有了div标签；把部分p 标签改为 span标签。
解决Ant Design错误警告：validateDOMNesting(...): ＜form＞ cannot appear as a descendant of ＜form＞.
清云
05-11 7058
解决Ant Design错误警告：validateDOMNesting(...): ＜form＞ cannot appear as a descendant of ＜form＞.
html
GoodIdea
04-19 214
标签定义及使用说明&lt;thead&gt; 标签用于组合 HTML 表格的表头内容。&lt;thead&gt; 元素应该与 &lt;tbody&gt; 和 &lt;tfoot&gt; 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每...
validateDOMNesting
schifred的博客
04-08 2061
validateDOMNesting模块用于校验父子节点设置及同名节点嵌套结构设定是否有误。   'use strict'; var _assign = require('object-assign'); var emptyFunction = require('fbjs/lib/emptyFunction'); var warning = require('fbjs/lib/...
javascript脚本编辑错误集（持续更新）
daoer_sofu的专栏
01-27 387
Each child in a list should have a unique “key” prop Dom在渲染数组时，需要一个key，不然嵌套数组时会引起歧义 <div className="classlist-contaier"> {this.state.classList.map((item, index) => { return <ClassItem key={index}/>; })} </div> .
在antd的标签组件中做路由跳转
huyao的博客
11-18 1万+
使用react-router-dom在组件中可以很方便的使用 Link 标签进行路由跳转。但是我碰到了这样的情况   Warning: validateDOMNesting(...): &lt;a&gt; cannot appear as a descendant of &lt;a&gt;. 意思是不能再 &lt;a&gt;标签中重复的出现&lt;a&gt;标签。 显然antd的组件...
react-dom.development.js:86 Warning: validateDOMNesting(...): Whitespace text nodes cannot appear a
最新发布
wqzbxh的博客
12-11 720
元素内部不能有额外的空白文本节点。这通常发生在 JSX 代码中，可能是由于代码格式化或排版引起的。标签内部没有额外的空白文本节点。请检查你的 JSX 代码，确保在。内部的标签之间没有多余的空格或换行符。这个警告是由 React 的。检查机制触发的，它指出在。解决这个问题的方法是确保在。
Unhandled Rejection (ChunkLoadError): Loading chunk mf-dep_vendors-node_modules_umi_node_modules_cor
weixin_46600931的博客
04-11 2469
config.tsx/umirc.ts配置chainWebpack时因加上此判断 if (process.env.UMI_ENV!umi Webpack打包配置在开发环境生效问题。打包生效应在非dev环境才能生效，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序边界

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值