ReactJS findDOMNode和getDOMNode不是函数

问题描述 投票:44回答:2

我正在使用ReactJS和Flux构建一个Web应用程序,并且尝试使用方法[[findDOMNode来获取当前div的节点,然后出现下一个错误:

Uncaught TypeError: React.findDOMNode is not a function
所以,我尝试使用

getDOMNode

,但得到了同样的错误:Uncaught TypeError: React.getDOMNode is not a function
我正在使用npm构建JS,即使用这些方法的代码:

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版本:0.14.0

编辑

正如答案中指出的那样,v0.14.0及更高版本的DOM库超出了React核心,因此我对代码进行了一些更改:

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;

但是我有另一个问题:

Uncaught Error: Invariant Violation: findDOMNode was called on an unmounted component.

javascript reactjs reactjs-flux flux
2个回答
59
投票
在最新的React中更改:

ReactDOM.findDOMNode

https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode

它在react-dom包中。注意,ReactDOMServer也已经移到另一个包中。可能正在准备与React相关的平台特定的API(例如React native)。

要导入/需要包:

import ReactDOM from "react-dom";

var ReactDOM = require('react-dom').


2
投票
In reactv0.14DOM库已从React.js本身移出。 BC有一些更改,但是如果您以正确的方式编写代码,那么更改将不会很痛苦。请阅读此处以获取完整概述:https://facebook.github.io/react/blog/#major-changes
© www.soinside.com 2019 - 2024. All rights reserved.