Warning: A string ref, "dialog", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead. Learn more about using refs safely here: https://fb.me/react-strict-mode-string-ref
in div (created by Dialog)
in View
in Transition (created by Dialog)
in div (created by Dialog)
in Dialog (at com-bottom-bar.tsx:125)
in div (at com-bottom-bar.tsx:111)
in ComBottomBar (at live.tsx:28)
in div (at live.tsx:26)
in div (at live.tsx:24)
in Live (created by Context.Consumer)
in Route (at App.tsx:18)
in Switch (at App.tsx:15)
in Suspense (at App.tsx:14)
in Router (created by HashRouter)
in HashRouter (at App.tsx:13)
in StrictMode (at App.tsx:12)
in div (at App.tsx:11)
in App (at src/index.tsx:9)
in StrictMode (at src/index.tsx:8)
console. @ index.js:1
printWarning @ react-dom.development.js:88
error @ react-dom.development.js:60
coerceRef @ react-dom.development.js:13332
reconcileSingleElement @ react-dom.development.js:14235
reconcileChildFibers @ react-dom.development.js:14293
reconcileChildren @ react-dom.development.js:16762
updateHostComponent @ react-dom.development.js:17302
beginWork @ react-dom.development.js:18627
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22157
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
workLoop @ scheduler.development.js:597
flushWork @ scheduler.development.js:552
performWorkUntilDeadline @ scheduler.development.js:164
Description
然后我翻阅了一下 Dialog 组件的源代码：
怀疑跟这个
ref="dialog"属性有关Reproduce Steps
Error Trace (if possible)
Warning: A string ref, "dialog", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead. Learn more about using refs safely here: https://fb.me/react-strict-mode-string-ref in div (created by Dialog) in View in Transition (created by Dialog) in div (created by Dialog) in Dialog (at com-bottom-bar.tsx:125) in div (at com-bottom-bar.tsx:111) in ComBottomBar (at live.tsx:28) in div (at live.tsx:26) in div (at live.tsx:24) in Live (created by Context.Consumer) in Route (at App.tsx:18) in Switch (at App.tsx:15) in Suspense (at App.tsx:14) in Router (created by HashRouter) in HashRouter (at App.tsx:13) in StrictMode (at App.tsx:12) in div (at App.tsx:11) in App (at src/index.tsx:9) in StrictMode (at src/index.tsx:8) console. @ index.js:1
printWarning @ react-dom.development.js:88
error @ react-dom.development.js:60
coerceRef @ react-dom.development.js:13332
reconcileSingleElement @ react-dom.development.js:14235
reconcileChildFibers @ react-dom.development.js:14293
reconcileChildren @ react-dom.development.js:16762
updateHostComponent @ react-dom.development.js:17302
beginWork @ react-dom.development.js:18627
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22157
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
workLoop @ scheduler.development.js:597
flushWork @ scheduler.development.js:552
performWorkUntilDeadline @ scheduler.development.js:164