fix: UI

Author: ascoders

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dob-react-devtools",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "",
   "main": "built/index.js",
   "scripts": {

src/debug-wrapper/debug-wrapper.component.tsx

@@ -61,19 +61,21 @@ export class DebugWrapper extends React.PureComponent<Props, State>{
   }
 
   public componentDidMount() {
-    // 渲染与当前组件一一对应的高亮节点
-    this.debugContainer = document.createElement("div")
-    this.debugContainer.style.position = 'absolute'
-    document.querySelector('#' + debugContainerId).appendChild(this.debugContainer)
-    ReactDOM.render(
-      <DebugBox
-        ref={ref => {
-          this.debugBox = ref
-        }}
-        dyDebug={this.context.dyDebug}
-      />,
-      this.debugContainer
-    )
+    // 渲染与当前组件一一对应的高亮节点，由于此时可能 debugContainer 不存在，因此 setTimeout 后执行
+    setTimeout(() => {
+      this.debugContainer = document.createElement("div")
+      this.debugContainer.style.position = 'absolute'
+      document.querySelector('#' + debugContainerId).appendChild(this.debugContainer)
+      ReactDOM.render(
+        <DebugBox
+          ref={ref => {
+            this.debugBox = ref
+          }}
+          dyDebug={this.context.dyDebug}
+        />,
+        this.debugContainer
+      )
+    })
 
     // TODO: 暂不处理多子元素的情况
     if (React.Children.count(this.props.children) > 1) {
@@ -117,6 +119,14 @@ export class DebugWrapper extends React.PureComponent<Props, State>{
       return
     }
 
+    // 如果 debugBox 还未实例化，下个事件循环再执行
+    if (!this.debugBox) {
+      setTimeout(() => {
+        this.onReRender({ debugId })
+      })
+      return
+    }
+
     this.debugBox.setRealChildDOM(this.realChildDOM)
 
     // 通知 debugBox 添加一个 debugId

src/tool-box/tool-box.component.tsx

@@ -33,19 +33,6 @@ export class ToolBox extends React.PureComponent<Props, State>{
    */
   private actionContainerDOM: HTMLElement = null
 
-  componentWillMount() {
-    // 在 body 下创建一个放置 debug-box 的节点
-    const debugContainer = document.createElement("div")
-    debugContainer.id = debugContainerId
-    debugContainer.style.position = 'absolute'
-    debugContainer.style.top = '0px'
-    debugContainer.style.right = '0px'
-    debugContainer.style.bottom = '0px'
-    debugContainer.style.left = '0px'
-    debugContainer.style.pointerEvents = 'none'
-    document.querySelector('body').appendChild(debugContainer)
-  }
-
   getChildContext() {
     return {
       dyDebug: this.context.dyDebug
@@ -61,6 +48,18 @@ export class ToolBox extends React.PureComponent<Props, State>{
     })
 
     this.context.dyDebug.event.on('focusActionDetail', this.handleFocusActionDetail)
+
+    // 在 body 下创建一个放置 debug-box 的节点
+    const debugContainer = document.createElement("div")
+    debugContainer.id = debugContainerId
+    debugContainer.style.position = 'fixed'
+    debugContainer.style.top = '0px'
+    debugContainer.style.right = '0px'
+    debugContainer.style.bottom = '0px'
+    debugContainer.style.left = '0px'
+    debugContainer.style.pointerEvents = 'none'
+    debugContainer.style.overflow = 'hidden'
+    ReactDOM.findDOMNode(this).appendChild(debugContainer)
   }
 
   public componentWillUnmount() {

src/tool-box/tool-box.style.ts

@@ -1,7 +1,7 @@
 import styled, { keyframes } from 'styled-components'
 
 export const Container = styled.div`
-  display: flex;
+  display: flex; 
 `
 
 export const ChildrenContainer = styled.div`