p标签包裹div标签结构导致的报错:<div> cannot appear as a descendant of <p>

接手了上任的工作后,发现不少的问题,在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)
    in pieCharts (at Profile/index.tsx:371)
    in div (created by Col)
    in Col (at Profile/index.tsx:363)
    in div (created by Row)
    in Row (at Profile/index.tsx:302)
    in div (created by TabPane)
    in TabPane (at Profile/index.tsx:216)
    in div (created by TabPanelList)
    in div (created by TabPanelList)
    in TabPanelList (created by ForwardRef(Tabs))
    in div (created by ForwardRef(Tabs))
    in ForwardRef(Tabs) (created by Context.Consumer)
    in Tabs (at Profile/index.tsx:202)
    in div (at Profile/index.tsx:201)
    in Unknown (created by Context.Consumer)
    in Route (created by Context.Consumer)
    in Switch (created by Context.Consumer)
    in main (created by Basic)
    in Basic (created by Content)
    in Content (at layout/index.tsx:117)
    in section (created by BasicLayout)
    in BasicLayout (created by Layout)
    in Layout (at layout/index.tsx:102)
    in section (created by BasicLayout)
    in BasicLayout (created by Layout)
    in Layout (at layout/index.tsx:76)
    in FormProvider (created by ProviderChildren)
    in LocaleProvider (created by ProviderChildren)
    in ProviderChildren (created by Context.Consumer)
    in LocaleReceiver (created by ConfigProvider)
    in ConfigProvider (at layout/index.tsx:147)
    in BasicLayout (created by Context.Consumer)
    in Route (created by AliveRouterComponent)
    in Switch (created by AliveRouterComponent)
    in AliveScope (at runtime.tsx:63)
    in Router (at runtime.tsx:62)
    in AliveRouterComponent (at runtime.tsx:70)
    in AccessProvider
    in Provider (created by _DvaContainer)
    in _DvaContainer
    in Unknown
    in Unknown

为啥p标签内不能放div标签呢!咱们看一个栗子来学习一下。

<p>
    <div>我是div1</div>
    <div>我是div2</div>
    <div>我是div3</div>
    <div>我是div4</div>
</p>

将这段代码丢到浏览器中你就会发现<p></p>会直接截断了,变成了两个完整的<p></p>
在这里插入图片描述

这样结构就不符合自己的预期结果了,所以在框架中就会将这些问题提前爆出来,希望你能够纠正。

おすすめ

転載: blog.csdn.net/cautionHua/article/details/120437538