Warning: validateDOMNesting(...):

cannot appear as a descendant of
. 编程｜前端编程｜ HTML
在HTML中，让div标签成为div标签的父亲节点，不要成为p标签节点
在React项目中可能收到以下的警告异常，意思是在HTML中div标签不能为p标签的孩子节点。
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
div
div
div
Spin@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:128753:19
SpinFC@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:128814:28
UserIndexHealthMulModule@http://192.168.1.12:8000/src_modules_profile_userHealthDetailDrawer_tsx-src_services_user_userHealthRecord_ts.async.js:2438:27
p
div
div
div
div
Comment@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:115112:17
div
WaterMark@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:69683:18
div
div
div
DrawerPanel@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:299261:19
div
DomWrapper@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:308951:90
genCSSMotion/CSSMotion<@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:308637:26
div
DrawerPopup@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:299326:19
./node_modules/@rc-component/portal/es/Portal.js/Portal<@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:91841:14
Drawer@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:299188:14
NoFormStyle@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:118670:18
NoCompactStyle@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:128403:18
Drawer@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:116894:15
VgReadDrawer@http://192.168.1.12:8000/src_components_VgDescItemDict_index_tsx-src_components_VgDescItemText_index_tsx-src_component-a561af.async.js:384:172
UserHealthDetailDrawer@http://192.168.1.12:8000/src_modules_profile_userHealthDetailDrawer_tsx-src_services_user_userHealthRecord_ts.async.js:2067:17
div
div
div
GridContent@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:65704:64
div
PageContainerBase@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:66188:18
ProConfigProvider@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:72332:18
PageContainer
OrganMemberList@http://192.168.1.12:8000/p__course__member__organMemberList.async.js:3027:179
Suspense
RemoteComponent@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:108063:19
Outlet@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:370940:3
EmptyRoute@http://192.168.1.12:8000/src_umi_core_EmptyRoute_tsx.async.js:34:70
Suspense
RemoteComponent@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:108063:19
Outlet@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:370940:3
Exception@http://192.168.1.12:8000/umi__plugin-layout__Layout.async.js:36:5
main
./node_modules/antd/es/layout/layout.js/Basic<@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:121374:19
generator/</Adapter<@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:121357:66
ErrorBoundary@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:81307:90
WrapContent@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:64081:70
div
section
./node_modules/antd/es/layout/layout.js/BasicLayout<@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:121388:63
generator/</Adapter<@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:121357:66
div
BaseProLayout@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:63740:7
ProviderChildren@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:115524:18
LocaleReceiver@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:121886:30
ConfigProvider@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:115627:7
div
SWRConfig$1@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:413897:17
ConfigProVoidContainer@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:72233:18
FormProvider@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:300734:26
LocaleProvider@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:121973:23
ProviderChildren@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:115524:18
LocaleReceiver@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:121886:30
ConfigProvider@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:115627:7
ProConfigProvider@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:72332:18
ProviderChildren@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:115524:18
LocaleReceiver@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:121886:30
ConfigProvider@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:115627:7
ProLayout@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:64031:22
./src/.umi/plugin-layout/Layout.tsx/__webpack_exports__.default<@http://192.168.1.12:8000/umi__plugin-layout__Layout.async.js:228:66
Suspense
RemoteComponent@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:108063:19
Routes@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:107585:76
Router@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:370969:7
BrowserRoutes@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:107543:17
FormProvider@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:300734:26
LocaleProvider@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:121973:23
ProviderChildren@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:115524:18
LocaleReceiver@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:121886:30
ConfigProvider@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:115627:7
_LocaleContainer@http://192.168.1.12:8000/src_umi_umi_ts.async.js:3465:125
Provider@http://192.168.1.12:8000/src_umi_umi_ts.async.js:2146:74
InitialStateProvider@http://192.168.1.12:8000/src_umi_umi_ts.async.js:2420:119
Provider@http://192.168.1.12:8000/src_umi_umi_ts.async.js:4040:16
ProviderWrapper@http://192.168.1.12:8000/src_umi_umi_ts.async.js:4255:116
r@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:367995:7320
Browser@http://192.168.1.12:8000/mf-dep____vendor.0f8fb37f.js:107658:68 mf-dep____vendor.0f8fb37f.js:106690:37087
    e mf-dep____vendor.0f8fb37f.js:106690
    printWarning mf-dep____vendor.0f8fb37f.js:341590
    error mf-dep____vendor.0f8fb37f.js:341566
    validateDOMNesting mf-dep____vendor.0f8fb37f.js:351606
    createInstance mf-dep____vendor.0f8fb37f.js:351704
    completeWork mf-dep____vendor.0f8fb37f.js:360987
    completeUnitOfWork mf-dep____vendor.0f8fb37f.js:364333
    performUnitOfWork mf-dep____vendor.0f8fb37f.js:364305
    workLoopSync mf-dep____vendor.0f8fb37f.js:364225
    renderRootSync mf-dep____vendor.0f8fb37f.js:364188
    performSyncWorkOnRoot mf-dep____vendor.0f8fb37f.js:363811
    flushSyncCallbackQueueImpl mf-dep____vendor.0f8fb37f.js:352850
    unstable_runWithPriority mf-dep____vendor.0f8fb37f.js:380696
    runWithPriority$1 mf-dep____vendor.0f8fb37f.js:352799
    flushSyncCallbackQueueImpl mf-dep____vendor.0f8fb37f.js:352845
    flushSyncCallbackQueue mf-dep____vendor.0f8fb37f.js:352832
    scheduleUpdateOnFiber mf-dep____vendor.0f8fb37f.js:363411
    dispatchAction mf-dep____vendor.0f8fb37f.js:357662
    Ember 4
    onItemClick mf-dep____vendor.0f8fb37f.js:123014
    memoFn mf-dep____vendor.0f8fb37f.js:339073
    onInternalClick mf-dep____vendor.0f8fb37f.js:306468
    callback mf-dep____vendor.0f8fb37f.js:308237
    onInternalClick mf-dep____vendor.0f8fb37f.js:306781
    callCallback mf-dep____vendor.0f8fb37f.js:345468
    invokeGuardedCallbackDev mf-dep____vendor.0f8fb37f.js:345517
    invokeGuardedCallback mf-dep____vendor.0f8fb37f.js:345579
    invokeGuardedCallbackAndCatchFirstError mf-dep____vendor.0f8fb37f.js:345593
    executeDispatch mf-dep____vendor.0f8fb37f.js:349766
    processDispatchQueueItemsInOrder mf-dep____vendor.0f8fb37f.js:349798
    processDispatchQueue mf-dep____vendor.0f8fb37f.js:349811
    dispatchEventsForPlugins mf-dep____vendor.0f8fb37f.js:349822
    dispatchEventForPluginEventSystem mf-dep____vendor.0f8fb37f.js:350031
    batchedEventUpdates$1 mf-dep____vendor.0f8fb37f.js:363914
    batchedEventUpdates mf-dep____vendor.0f8fb37f.js:345268
    dispatchEventForPluginEventSystem mf-dep____vendor.0f8fb37f.js:350030
    attemptToDispatchEvent mf-dep____vendor.0f8fb37f.js:347528
    dispatchEvent mf-dep____vendor.0f8fb37f.js:347447
    unstable_runWithPriority mf-dep____vendor.0f8fb37f.js:380696
    runWithPriority$1 mf-dep____vendor.0f8fb37f.js:352799
    discreteUpdates$1 mf-dep____vendor.0f8fb37f.js:363931
    discreteUpdates mf-dep____vendor.0f8fb37f.js:345279
    dispatchDiscreteEvent mf-dep____vendor.0f8fb37f.js:347412
其解决方案是让div标签成为div标签的父亲节点，不要成为p标签节点。
点击阅读全文
发表 2023-01-21 07:40:33 颛顼 →