接手了上任的工作后,发现不少的问题,在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>
这样结构就不符合自己的预期结果了,所以在框架中就会将这些问题提前爆出来,希望你能够纠正。