ElemeFE / ElemeFE/element-react

开发时告警:Warning: A string ref, "dialog", has been found within a strict mode tree.

Open
#1,074 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.8k
Forks
435
PR merge metrics
No merged PRs in 30d

Description

### Description
![image](https://user-images.githubusercontent.com/37361895/85117256-2ae57f80-b251-11ea-929b-8f781b8c02dc.png)

然后我翻阅了一下 Dialog 组件的源代码:
![image](https://user-images.githubusercontent.com/37361895/85117200-13a69200-b251-11ea-8c7c-4ee628674748.png)
怀疑跟这个` ref="dialog"` 属性有关

### Reproduce Steps

1. 安装 react 6.13.1;
2. 安装 element-react 1.4.34
3. 运行项目就会报warning:
![image](https://user-images.githubusercontent.com/37361895/85117256-2ae57f80-b251-11ea-929b-8f781b8c02dc.png)

### 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.