当前位置: 首页 > 面试题库 >

ReactJS findDOMNode和getDOMNode不是函数

松鸣
2023-03-14
问题内容

我正在使用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.

问题答案:

在最新的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').


 类似资料:
  • 问题内容: 有人可以告诉我之间有什么区别 和 他们在做同样的事情-获取element的值,但是我应该在哪里使用哪个。 问题答案: 从React 0.13开始不推荐使用: 添加了新的顶级API ,应代替。基于ES6的组件的基类将没有。这一变化将使更多的模式向前发展。 通过http://facebook.github.io/react/blog/2015/03/10/react-v0.13.html#

  • 问题内容: 当我试图在React版本15.2.0中使用这两个函数时,我在代码中发现了一个问题,尽管如此,我找到了一种解决方法,但是我想知道是否有更好的解决方案。 因此,每当我尝试运行index.html文件时,都不会显示任何内容,但是控制台会出现第一个错误: React.render不是function 。我发现发生这种情况是因为新版本的React需要使用react-dom,即 现在问题已解决,但

  • 我喜欢克隆一个表格,从每个单元格中去掉EUR这个词。我尝试使用.RemoveByContent但得到错误“不是函数”。 这是我的代码: 下面是表格: 如何删除克隆元素中的字符串?

  • 问题内容: 我正在尝试在Angular中使用Cookie-这是我正在尝试的方法: 我在控制台中收到此错误: 有什么想法我要去哪里吗? 更新 检查所有版本使用的Angular版本-任何Angular人士都可以阅读,并在文档中将版本切换为鲜绿色且巨大!您根本不会注意到它。 问题答案: 在Angular 1.3.14中,您可以使用 请参阅以下文档:Angular Cookies

  • 问题内容: 我正在为无法解决的错误而烦恼。我有以下内容; JSON格式 和下面的jQuery 但是我收到一个错误,认为map.data未定义为函数?看着它,我不知道什么是行不通的,因为我已将其从以前使用的代码复制到新项目中。唯一不同的是JSON源。上一个没有[]括号之前的部分。这是什么让我失望吗? 问题答案: 对象,在JavaScript没有方法,它只是为数组,。 因此,为了使您的代码正常工作,请

  • 问题内容: 我有这段代码可用于从Arduino接收数据,但我想将数据发送回Arduino并在客户端页面上获得响应。我添加了侦听功能,但是从客户端页面发送数据时却不断获取信息。 test.js 问题答案: 您的价值不是应有的价值。 通常的做事方式是这样的: 但是我猜你的价值是这样的: 那不是同一回事。那就是模块句柄。但是,当您这样做时: 然后,是一个socket.io实例。您可以将侦听器绑定到实例,