响应0.13 this.getDOMNode()，等价于React.findDOMNode()
这在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节点。这个是可能的吗？
回答 4
Stack Overflow用户
发布于 2015-04-09 03:56:27
更新React v0.14+
在React v0.14+ 这种情况已经改变了中，您现在应该使用react-dom模块：
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" />
反应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>
Stack Overflow用户
发布于 2015-11-06 13:47:43
请注意，截至反应的第0.14节
React.findDOMNode变成ReactDom.findDOMNode(this);
var ReactDom = require('react-dom');正如在https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html中所解释的
Stack Overflow用户
发布于 2016-10-13 12:58:43
对于更复杂的元素，如在标准DOM元素上创建的React组件，refs只给我们提供第一个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 get输入元素。此解决方案适用于任何复杂的组件，我们总是可以在其中进行查询。在React (15.3.2).上测试
https://stackoverflow.com/questions/29527309
复制相似问题
腾讯云开发者
