Question

这在React版本0.12中完全正常：

componentDidMount: function () {
    var dom = this.getDOMNode();
}

变量dom获取渲染组件的实际DOM节点。但是，将其转换为React 0.13并不能按预期工作：

componentDidMount: function () {
    var dom = React.findDOMNode();
    // dom is undefined
}

我尝试了React.findDOMNode(this)这也不起作用。基本上我只是尝试获取渲染函数渲染的顶级dom节点而不使用ref。这可能吗？

Answer 1

更新React v0.14 +

在React v0.14 + this has changed中，您现在应该使用react-dom模块：

import ReactDOM from 'react-dom';

ReactDOM.findDOMNode(this);

<强> ES6

＆＃13;

class Test extends React.Component {
  componentDidMount() {
    const element = ReactDOM.findDOMNode(this);
    console.log(element);
    alert(element);
  }
  
  render() {
    return (
      <div>test</div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById('r'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="r" />

＆＃13;

<强> ES5

＆＃13;

var Test = React.createClass({
  componentDidMount: function() {
    var dom = ReactDOM.findDOMNode(this);
    console.log(dom);
    alert(dom);
  },
  render: function() {
    return React.createElement('div', null, 'test');
  }
});

ReactDOM.render(React.createElement(Test), document.getElementById('r'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="r" />

＆＃13;

React v0.13及以下

将此作为参数传递绝对可以起作用：

React.findDOMNode(this);

如果没有，可能会发生其他事情。见下面的演示：

＆＃13;

var Test = React.createClass({
  componentDidMount: function() {
    var dom = React.findDOMNode(this);
    console.log(dom);
    alert(dom);
  },
  render: function() {
    return React.DOM.div(null, 'test');
  }
});

React.render(React.createElement(Test), document.getElementById('r'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.js"></script>
<div id="r"></div>

＆＃13;

Answer 2

请注意，从React v0.14开始

React.findDOMNode变为ReactDom.findDOMNode(this);

var ReactDom = require('react-dom');

如https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

中所述

Answer 3

React 15.0.1需要以下语法：ReactDOM.findDOMNode

e.g。

var x = ReactDOM.findDOMNode(this.refs.author);

Answer 4

对于更复杂的元素，例如在标准DOM元素refs上创建的React组件，我们只给出第一个DOM元素（组件的根元素），因此有时我们需要在其中找到所需的节点。好的例子是 Material-Ui TextField 组件以及我们如何从中获取价值。

1.需要进口

import React, { Component } from 'react';
import TextField from 'material-ui/TextField';
import ReactDOM from 'react-dom';

2.虚拟dom和ref="variable"

 <TextField floatingLabelText="Some title" ref="title" />

3. TextField中的查询：

ReactDOM.findDOMNode(this.refs.title).querySelector("input").value

或多线：

ReactDOM.findDOMNode(this.refs.title).querySelector("textarea").value

我们从TextField容器开始，使用标准DOM查询querySelector得到想要的输入元素。此解决方案适用于任何复杂的组件，我们始终可以在其中进行查询。经过反复测试（15.3.2）。

Answer 5

我认为您不需要使用ReactDOM.findDOMNode，可以使用简单的e.target.innerHTML。在此选项中，您无需导入ReactDOM。

React 0.13 this.getDOMNode（）等效于React.findDOMNode（）

5 个答案: