fix: react@16 ref

react-component · Sep 29, 2017 · e66a965 · e66a965
1 parent 06383a5
commit e66a965
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 8 deletions.
diff --git a/examples/ant-design.tsx b/examples/ant-design.tsx
@@ -7,10 +7,17 @@ import ReactDOM from 'react-dom';
 import Dialog from '../src/DialogWrap';
 
 class MyControl extends React.Component<any, any> {
+  modalInput: any;
+
   state = {
     visible: false,
     center: false,
   };
+
+  componentDidMount() {
+    console.log(this.modalInput);
+  }
+
   onClick = () => {
     this.setState({
       visible: true,
@@ -41,7 +48,7 @@ class MyControl extends React.Component<any, any> {
         maskAnimation="fade"
         onClose={this.onClose}
       >
-        <input />
+        <input ref={el => this.modalInput = el} />
         <p>basic modal</p>
         <div style={{ height: 200 }}></div>
       </Dialog>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rmc-dialog",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "mobile dialog ui component for react",
   "keywords": [
     "react",

diff --git a/src/DialogWrap.tsx b/src/DialogWrap.tsx
@@ -6,13 +6,17 @@ import IDialogPropTypes from './IDialogPropTypes';
 function noop() {
 }
 
+const IS_REACT_16 = !!(ReactDOM as any).createPortal;
+
 export default class DialogWrap extends React.Component<IDialogPropTypes, any> {
   static defaultProps = {
     visible: false,
     prefixCls: 'rmc-dialog',
     onClose: noop,
   };
 
+  _component: any;
+
   componentDidMount() {
     if (this.props.visible) {
       this.componentDidUpdate();
@@ -32,39 +36,63 @@ export default class DialogWrap extends React.Component<IDialogPropTypes, any> {
   }
 
   componentDidUpdate() {
-    this.renderDialog(this.props.visible);
+    if (!IS_REACT_16) {
+      this.renderDialog(this.props.visible);
+    }
+  }
+
+  saveRef = (node) => {
+    if (IS_REACT_16) {
+      this._component = node;
+    }
   }
 
-  getComponent(visible) {
+  getComponent = (visible) => {
     const props = {...this.props};
     ['visible', 'onAnimateLeave'].forEach(key => {
       if (props.hasOwnProperty(key)) {
         delete props[key];
       }
     });
-    return <Dialog {...props} visible={visible} onAnimateLeave={this.removeContainer}  />;
+    return (
+      <Dialog {...props} visible={visible} onAnimateLeave={this.removeContainer} ref={this.saveRef} />
+    );
   }
 
   removeContainer = () => {
     const container = document.querySelector(`#${this.props.prefixCls}-container`);
     if (container) {
-      ReactDOM.unmountComponentAtNode(container);
+      if (!IS_REACT_16) {
+        ReactDOM.unmountComponentAtNode(container);
+      }
       (container as any).parentNode.removeChild(container);
     }
   }
 
-  renderDialog(visible) {
+  getContainer = () => {
     const prefixCls = this.props.prefixCls;
     let container = document.querySelector(`#${prefixCls}-container`);
     if (!container) {
       container = document.createElement('div');
       container.setAttribute('id', `${prefixCls}-container`);
       document.body.appendChild(container);
     }
-    ReactDOM.render(this.getComponent(visible), container);
+    return container;
+  }
+
+  renderDialog(visible) {
+    ReactDOM.unstable_renderSubtreeIntoContainer(
+      this,
+      this.getComponent(visible),
+      this.getContainer(),
+    );
   }
 
   render() {
+    const { visible } = this.props;
+    if (IS_REACT_16 && (visible || this._component)) {
+      return (ReactDOM as any).createPortal(this.getComponent(visible), this.getContainer());
+    }
     return (null as any);
   }
 }