fix: 修复 Message 组件卸载时报错

cuke-ui · Oct 31, 2018 · 9cb76dd · 9cb76dd
1 parent 2dcb43e
commit 9cb76dd
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 21 deletions.
diff --git a/components/message/index.js b/components/message/index.js
@@ -16,6 +16,8 @@ export default class Message extends PureComponent {
     visible: true
   };
   animationTime = 500;
+  _containerRef = null;
+  _currentNodeRef = null;
   constructor(props) {
     super(props);
     this.typeConfig = {
@@ -42,14 +44,6 @@ export default class Message extends PureComponent {
     darkTheme: false,
     onClose: () => {}
   };
-  createContainer() {
-    const { prefixCls } = this.props;
-    if (!this.container) {
-      this.container = document.createElement("div");
-      this.container.className = prefixCls;
-      document.body.appendChild(this.container);
-    }
-  }
   componentDidMount() {
     const { duration, onClose } = this.props;
 
@@ -66,12 +60,12 @@ export default class Message extends PureComponent {
     this.removeNode();
   }
   removeNode = () => {
-    ReactDOM.unmountComponentAtNode(this.container);
-    this.container.remove();
+    ReactDOM.unmountComponentAtNode(this._containerRef);
+    this._currentNodeRef.remove();
   };
   static renderElement = (type, title, duration, onClose, darkTheme) => {
-    let div = document.createElement("div");
-    document.body.appendChild(div);
+    const container = document.createElement("div");
+    const currentNode = document.body.appendChild(container);
     let _message = ReactDOM.render(
       <Message
         type={type}
@@ -80,10 +74,10 @@ export default class Message extends PureComponent {
         duration={duration}
         onClose={onClose}
       />,
-      div
+      container
     );
-    _message._container = div;
-    _message._dom = div;
+    _message._containerRef = container;
+    _message._currentNodeRef = currentNode;
   };
   static error(title, duration, onClose, darkTheme) {
     this.renderElement("error", title, duration, onClose, darkTheme);

diff --git a/components/tabs/TabPane.js b/components/tabs/TabPane.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from "react";
 import cls from "classnames";
 
-class BreadcrumbItem extends PureComponent {
+class TabPanel extends PureComponent {
   static defaultProps = {
     prefixCls: "cuke-tabs-panel"
   };
@@ -26,4 +26,4 @@ class BreadcrumbItem extends PureComponent {
   }
 }
 
-export default BreadcrumbItem;
+export default TabPanel;
diff --git a/components/tabs/__tests__/__snapshots__/index.test.js.snap b/components/tabs/__tests__/__snapshots__/index.test.js.snap
@@ -139,24 +139,24 @@ exports[`<Tabs/> should render custom tab title 1`] = `
   <div
     className="cuke-tabs-content"
   >
-    <BreadcrumbItem
+    <TabPanel
       activeKey={2}
       key="0/.$1"
       prefixCls="cuke-tabs-panel"
       tab={<SuccessIcon />}
       visible={false}
     >
       1
-    </BreadcrumbItem>
-    <BreadcrumbItem
+    </TabPanel>
+    <TabPanel
       activeKey={2}
       key="1/.$2"
       prefixCls="cuke-tabs-panel"
       tab={<ErrorIcon />}
       visible={true}
     >
       2
-    </BreadcrumbItem>
+    </TabPanel>
   </div>
 </div>
 `;