Convert to new ReactDOM.createPortal

BinaryMuse · kuychaco · commit e43d27bcf38d · 2017-09-14T18:48:24.000-07:00
diff --git a/lib/views/portal.js b/lib/views/portal.js
@@ -12,7 +12,7 @@ import PropTypes from 'prop-types';
  *
  * Given the above example, there will be a span with the class "portal-class"
  * created and appended to the document body, and then `<Stuff />` will be
- * rendered into it. Note that this uses `unstable_renderSubtreeIntoContainer`
+ * rendered into it. Note that this uses `createPortal`
  * to preserve context in the subtree.
  *
  * `getElement()` allows access to the React subtree container element.
@@ -29,6 +29,7 @@ export default class Portal extends React.Component {
     className: PropTypes.string,
     appendNode: PropTypes.bool,
     getDOMNode: PropTypes.func,
+    children: PropTypes.element.isRequired,
   }
 
   static defaultProps = {
@@ -38,56 +39,43 @@ export default class Portal extends React.Component {
     getDOMNode: null,
   }
 
-  componentDidMount() {
+  constructor(props, context) {
+    super(props, context);
+
     let node;
-    if (this.props.getDOMNode) {
-      node = this.props.getDOMNode();
+    if (props.getDOMNode) {
+      node = props.getDOMNode();
     }
 
     if (!node) {
-      node = document.createElement(this.props.type);
-      node.className = this.props.className;
+      node = document.createElement(props.type);
+      node.className = props.className;
     }
 
     this.node = node;
 
-    if (this.props.appendNode) {
-      document.body.appendChild(this.node);
+    if (props.appendNode) {
+      document.body.appendChild(node);
     }
-    this.renderPortal(this.props);
-  }
-
-  componentWillReceiveProps(newProps) {
-    this.renderPortal(newProps);
   }
 
   componentWillUnmount() {
-    ReactDom.unmountComponentAtNode(this.node);
     if (this.props.appendNode) {
-      document.body.removeChild(this.node);
+      document.body.removeChild(this.state.node);
     }
   }
 
-  renderPortal(props) {
-    this.subtree = ReactDom.unstable_renderSubtreeIntoContainer(
-      this, props.children, this.node,
-    );
-  }
-
-  shouldComponentUpdate() {
-    return false;
-  }
-
   render() {
-    return null;
+    const child = React.Children.only(this.props.children);
+    return ReactDom.createPortal(React.cloneElement(child, {ref: c => { this.subtree = c; }}), this.node);
   }
 
   getRenderedSubtree() {
     return this.subtree;
   }
 
   getElement() {
-    return this.node;
+    return this.state.node;
   }
 
   getView() {
