React 0.13 this.getDOMNode() 等效于 React.findDOMNode() [英] React 0.13 this.getDOMNode() equivalent to React.findDOMNode()
问题描述
这在 React 0.12 版中运行良好:
This works perfectly fine in React version 0.12:
componentDidMount: function () {
var dom = this.getDOMNode();
}
变量 dom
获取渲染组件的实际 DOM 节点.但是,将其转换为 React 0.13 并不能按预期工作:
The variable dom
gets the actual DOM node for the rendered component. However, converting this to React 0.13 does not work as expected:
componentDidMount: function () {
var dom = React.findDOMNode();
// dom is undefined
}
我试过 React.findDOMNode(this)
也不管用.基本上我只是想在不使用 ref 的情况下获取渲染函数渲染的顶级 dom 节点.这可能吗?
I tried React.findDOMNode(this)
which does not work either. Basically I'm just trying to fetch the top-level dom node rendered by the render function without using a ref. Is this possible?
推荐答案
更新 React v0.14+
在 React v0.14+ 这已经改变了,你现在应该使用 react-dom
模块:
In React v0.14+ this has changed, you should now use the react-dom
module:
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 及以下
将此作为参数传递肯定可以工作:
Passing this as the parameter should definitely work:
React.findDOMNode(this);
如果没有,可能会发生其他事情.请参阅下面的演示:
If not, something else may be going on. See demo below:
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 0.13 this.getDOMNode() 等效于 React.findDOMNode()的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!