diff --git a/.size-snapshot.json b/.size-snapshot.json index 805da885..7d3ad606 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,12 +1,12 @@ { "./lib/dist/react-transition-group.js": { - "bundled": 80859, - "minified": 22686, - "gzipped": 6939 + "bundled": 82017, + "minified": 22806, + "gzipped": 7001 }, "./lib/dist/react-transition-group.min.js": { - "bundled": 46875, - "minified": 15056, - "gzipped": 4715 + "bundled": 47393, + "minified": 15176, + "gzipped": 4768 } } diff --git a/src/Transition.js b/src/Transition.js index aada089a..a7088a6e 100644 --- a/src/Transition.js +++ b/src/Transition.js @@ -1,6 +1,5 @@ import * as PropTypes from 'prop-types' import React from 'react' -import ReactDOM from 'react-dom' import { polyfill } from 'react-lifecycles-compat' import { timeoutsShape } from './utils/PropTypes' @@ -140,6 +139,10 @@ class Transition extends React.Component { this.nextCallback = null } + setChildNode = node => { + this.childNode = node + } + getChildContext() { return { transitionGroup: null } // allows for nested Transitions } @@ -216,12 +219,13 @@ class Transition extends React.Component { if (nextStatus !== null) { // nextStatus will always be ENTERING or EXITING. this.cancelNextCallback() - const node = ReactDOM.findDOMNode(this) - - if (nextStatus === ENTERING) { - this.performEnter(node, mounting) - } else { - this.performExit(node) + const node = this.childNode + if (node) { + if (nextStatus === ENTERING) { + this.performEnter(node, mounting) + } else { + this.performExit(node) + } } } else if (this.props.unmountOnExit && this.state.status === EXITED) { this.setState({ status: UNMOUNTED }) @@ -357,6 +361,8 @@ class Transition extends React.Component { delete childProps.onExiting delete childProps.onExited + childProps.ref = this.setChildNode + if (typeof children === 'function') { return children(status, childProps) }