I'm building a web-app with ReactJS and Flux and I'm trying to get the node of my current div using the method findDOMNode and I get the next error:
Uncaught TypeError: React.findDOMNode is not a function
So, I tried to use getDOMNode and I get the very same error:
Uncaught TypeError: React.getDOMNode is not a function
I'm using npm to build the JS, the code where I use these methods:
var React = require('react');
var stores = require('../stores');
var MessagesUserContainer = require('./messageusercontainer');
var ChatStore = stores.ChatStore;
var owner = stores.getOwner();
var MessagesList = React.createClass({
getInitialState: function(){
return {'muc': []};
},
componentDidUpdate: function(){
var node = React.findDOMNode(this); //Error here
node.scrollTop = node.scrollHeight;
},
render: function(){
return (
<div className="chatScroll">
{this.state.muc}
</div>
)
}
});
module.exports = MessagesList;
ReactJS verion: 0.14.0
EDIT
As pointed out in the answers, the DOM library as of v0.14.0 is out of the React core, so I made a few changes to my code:
var React = require('react');
var ReactDOM = require('react-dom');
var stores = require('../stores');
var MessagesUserContainer = require('./messageusercontainer');
var ChatStore = stores.ChatStore;
var owner = stores.getOwner();
var MessagesList = React.createClass({
getInitialState: function(){
return {'muc': []};
},
componentDidUpdate: function(){
var node = ReactDOM.findDOMNode(this);
node.scrollTop = node.scrollHeight;
},
render: function(){
return (
<div className="chatScroll">
{this.state.muc}
</div>
)
}
});
module.exports = MessagesList;
But I got another problem:
Uncaught Error: Invariant Violation: findDOMNode was called on an unmounted component.
React library is responsible for creating views and ReactDOM library is responsible to actually render UI in the browser. Include these two libraries before your main JavaScript file. While learning How React works, we'll build a small application using react and ReactDOM.
findDOMNode is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction. It has been deprecated in StrictMode .
render() The first argument is the element or component we want to render, and the second argument is the HTML element (the target node) to which we want to append it. Generally, when we create our project with create-react-app , it gives us a div with the id of a root inside index.
Remove stand-alone element onclick in ReactAttach an event handler to the onClick event of the element. In the event handler, negate the value of the visibility state to remove the element from the DOM.
Changed in latest React:
ReactDOM.findDOMNode
https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode
It is in the react-dom
package. Note that ReactDOMServer has also been moved into another package. Probably in preparation for React related platform-specific APIs (such as React native).
To import/ require the package:
import ReactDOM from "react-dom";
or
var ReactDOM = require('react-dom').
In react v0.14
DOM library has been moved from React.js itself. There are some BC changes, but if you wrote your code in a proper way then changes won't be painful. Please read here for full overview: https://facebook.github.io/react/blog/#major-changes
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With