From b46a6ce4bb8d6087ed424764f41fe4b8e248b3b4 Mon Sep 17 00:00:00 2001 From: Jim Date: Tue, 2 Dec 2014 16:44:34 -0800 Subject: [PATCH] Added findDOMNode, as we move toward deprecating getDOMNode --- src/browser/__tests__/findDOMNode.-test.js | 51 ++++++++++++++++++++ src/browser/findDOMNode.js | 50 +++++++++++++++++++ src/browser/ui/React.js | 2 + src/browser/ui/ReactBrowserComponentMixin.js | 10 +--- 4 files changed, 105 insertions(+), 8 deletions(-) create mode 100644 src/browser/__tests__/findDOMNode.-test.js create mode 100644 src/browser/findDOMNode.js diff --git a/src/browser/__tests__/findDOMNode.-test.js b/src/browser/__tests__/findDOMNode.-test.js new file mode 100644 index 0000000000000..86d3253a9a64c --- /dev/null +++ b/src/browser/__tests__/findDOMNode.-test.js @@ -0,0 +1,51 @@ +/** + * Copyright 2013-2014, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @emails react-core + */ + +"use strict"; + +var React = require('React'); +var ReactTestUtils = require('ReactTestUtils'); + +describe('findDOMNode', function() { + it('findDOMNode should return null if passed null', function() { + expect(React.findDOMNode(null)).toBe(null); + }); + + it('findDOMNode should find dom element', function() { + var MyNode = React.createClass({ + render: function() { + return
Noise
; + } + }); + + var myNode = ReactTestUtils.renderIntoDocument(); + var myDiv = React.findDOMNode(myNode); + var mySameDiv = React.findDOMNode(myDiv); + expect(myDiv.tagName).toBe('DIV'); + expect(mySameDiv).toBe(myDiv); + }); + + it('findDOMNode should reject random objects', function() { + expect(function() {React.findDOMNode({foo: 'bar'});}) + .toThrow('Invariant Violation: Element appears to be neither ' + + 'ReactComponent nor DOMNode (keys: foo)' + ); + }); + + it('findDOMNode should reject unmounted objects with render func', function() { + expect(function() {React.findDOMNode({render: function(){}});}) + .toThrow('Invariant Violation: Component contains `render` ' + + 'method but is not mounted in the DOM' + ); + }); + +}); + diff --git a/src/browser/findDOMNode.js b/src/browser/findDOMNode.js new file mode 100644 index 0000000000000..c901a20492268 --- /dev/null +++ b/src/browser/findDOMNode.js @@ -0,0 +1,50 @@ +/** + * Copyright 2013-2014, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule findDOMNode + * @typechecks static-only + */ + +"use strict"; + +var ReactComponent = require('ReactComponent'); +var ReactInstanceMap = require('ReactInstanceMap'); +var ReactMount = require('ReactMount'); + +var invariant = require('invariant'); +var isNode = require('isNode'); + +/** + * Returns the DOM node rendered by this element. + * + * @param {ReactComponent|DOMElement} element + * @return {DOMElement} The root node of this element. + */ +function findDOMNode(componentOrElement) { + if (componentOrElement == null) { + return null; + } + if (isNode(componentOrElement)) { + return componentOrElement; + } + if (ReactInstanceMap.has(componentOrElement)) { + return ReactMount.getNodeFromInstance(componentOrElement); + } + invariant( + !(componentOrElement.render != null && typeof(componentOrElement.render) === 'function'), + 'Component contains `render` method but is not mounted in the DOM', + Object.keys(componentOrElement) + ); + invariant( + false, + 'Element appears to be neither ReactComponent nor DOMNode (keys: %s)', + Object.keys(componentOrElement) + ); +} + +module.exports = findDOMNode; diff --git a/src/browser/ui/React.js b/src/browser/ui/React.js index 94fbdb48919bf..98070b282ea31 100644 --- a/src/browser/ui/React.js +++ b/src/browser/ui/React.js @@ -35,6 +35,7 @@ var ReactRef = require('ReactRef'); var ReactServerRendering = require('ReactServerRendering'); var assign = require('Object.assign'); +var findDOMNode = require('findDOMNode'); var onlyChild = require('onlyChild'); ReactDefaultInjection.inject(); @@ -69,6 +70,7 @@ var React = { }, constructAndRenderComponent: ReactMount.constructAndRenderComponent, constructAndRenderComponentByID: ReactMount.constructAndRenderComponentByID, + findDOMNode: findDOMNode, render: render, renderToString: ReactServerRendering.renderToString, renderToStaticMarkup: ReactServerRendering.renderToStaticMarkup, diff --git a/src/browser/ui/ReactBrowserComponentMixin.js b/src/browser/ui/ReactBrowserComponentMixin.js index 2322b73a22da5..ba3dc2a4f395d 100644 --- a/src/browser/ui/ReactBrowserComponentMixin.js +++ b/src/browser/ui/ReactBrowserComponentMixin.js @@ -11,9 +11,7 @@ "use strict"; -var ReactMount = require('ReactMount'); - -var invariant = require('invariant'); +var findDOMNode = require('findDOMNode'); var ReactBrowserComponentMixin = { /** @@ -24,11 +22,7 @@ var ReactBrowserComponentMixin = { * @protected */ getDOMNode: function() { - invariant( - this.isMounted(), - 'getDOMNode(): A component must be mounted to have a DOM node.' - ); - return ReactMount.getNodeFromInstance(this); + return findDOMNode(this); } };