ReactJS findDOMNode 和 getDOMNode 不是函数 [英] ReactJS findDOMNode and getDOMNode are not functions

问题描述

我正在使用 ReactJS 和 Flux 构建一个网络应用程序，我正在尝试使用 findDOMNode 方法获取当前 div 的节点，但出现下一个错误:

未捕获的类型错误:React.findDOMNode 不是函数

所以，我尝试使用 getDOMNode 并且我得到了同样的错误:

未捕获的类型错误:React.getDOMNode 不是函数

我正在使用 npm 来构建 JS，我使用这些方法的代码:

var React = require('react');var store = require('../stores');var MessagesUserContainer = require('./messageusercontainer');var ChatStore = stores.ChatStore;var owner = stores.getOwner();var MessagesList = React.createClass({getInitialState: 函数(){返回{'粘':[]};},componentDidUpdate: 函数(){var node = React.findDOMNode(this);//这里出错node.scrollTop = node.scrollHeight;},渲染:函数(){返回 (<div className="chatScroll">{this.state.muc}

)}});module.exports = MessagesList;

ReactJS 版本:0.14.0

编辑

正如答案中所指出的，从 v0.14.0 开始的 DOM 库不在 React 核心之外，所以我对我的代码进行了一些更改:

var React = require('react');var ReactDOM = require('react-dom');var store = require('../stores');var MessagesUserContainer = require('./messageusercontainer');var ChatStore = stores.ChatStore;var owner = stores.getOwner();var MessagesList = React.createClass({getInitialState: 函数(){返回{'粘':[]};},componentDidUpdate: 函数(){var node = ReactDOM.findDOMNode(this);node.scrollTop = node.scrollHeight;},渲染:函数(){返回 (<div className="chatScroll">{this.state.muc}

)}});module.exports = MessagesList;

但我遇到了另一个问题:

未捕获的错误:不变违规:在未安装的组件上调用了 findDOMNode.

解决方案

在最新的 React 中更改:

ReactDOM.findDOMNode

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

它在 react-dom 包中.请注意， ReactDOMServer 也已移动到另一个包中.可能是为了准备 React 相关平台特定的 API(比如 React Native).

导入/需要包:

从react-dom"导入 ReactDOM；

或

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

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.

解决方案

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').

这篇关于ReactJS findDOMNode 和 getDOMNode 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！