这在 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)哪个也不起作用。基本上我只是想在不使用 ref 的情况下获取渲染函数渲染的顶级 dom 节点。这可能吗？
更新 React v0.14+
在 React v0.14+ 中，这已经改变了，您现在应该使用该react-dommodule：
import ReactDOM from 'react-dom';
ReactDOM.findDOMNode(this);
ES6
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'));<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" />ES5
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'));<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" />react v0.13 及以下
将其作为参数传递应该绝对有效：
React.findDOMNode(this);
如果没有，可能会发生其他事情。请参阅下面的演示：
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'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.js"></script>
<div id="r"></div>请注意，从 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 中所述
React 15.0.1 需要以下语法： ReactDOM.findDOMNode
例如
var x = ReactDOM.findDOMNode(this.refs.author);
对于更复杂的元素，比如在标准 DOM 元素上创建的 React 组件，refs我们只提供第一个 DOM 元素（组件的根元素），因此有时我们需要在其中找到所需的节点。很好的例子是Material-Ui TextField组件以及我们如何从中获取value。
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获取想要的输入元素。此解决方案适用于任何复杂的组件，我们始终可以在其中进行查询。在 React (15.3.2)上测试。
我认为你不需要使用ReactDOM.findDOMNode，你可以使用 simple e.target.innerHTML。在此选项中，您不需要导入ReactDOM.