React.js:findDOMNode 和 getDOMNode 的区别 [英] React.js: The difference between findDOMNode and getDOMNode

问题描述

谁能告诉我两者有什么区别

Could somebody tell me what's the difference between

React.findDOMNode(this.refs.email).value

和

this.refs.email.getDOMNode().value

他们在做同样的事情 - 获取元素的值，但我应该在哪里使用哪个.

They are doing the same thing - getting the value of element, but where should I use which one.

推荐答案

component.getDOMNode() 从 React 0.13 开始弃用:

component.getDOMNode() is deprecated as of React 0.13:

添加了新的顶级 API React.findDOMNode(component)，应该是用于代替 component.getDOMNode().基于 ES6 的基类组件将没有 getDOMNode.此更改将启用更多模式向前发展.

Added new top-level API React.findDOMNode(component), which should be used in place of component.getDOMNode(). The base class for ES6-based components will not have getDOMNode. This change will enable some more patterns moving forward.

通过 http://facebook.github.io/react/blog/2015/03/10/react-v0.13.html#new-features

它可能会在 React 的未来版本中被删除(但不要引用我的话，因为我找不到好的参考).

It will likely be removed in a future version of React (but don't quote me on that, because I can't find a good reference).

getDOMNode() 在 0.13 和 0.14 中抛出警告，在 0.15 中将完全删除:

getDOMNode() throws a warning in 0.13 and 0.14, and it will be removed completely in 0.15:

对于每个返回的 DOM 节点，我们添加了一个 getDOMNode 方法用于向后兼容性将在 0.15 之前出现警告.

With each returned DOM node, we've added a getDOMNode method for backwards compatibility that will work with a warning until 0.15.

通过https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#new-deprecations-introduced-with-a-warning

另请注意，从 0.14 开始，React DOM 组件不再需要调用 findDOMNode 或 getDOMNode:

Also note that calling findDOMNode or getDOMNode is no longer necessary for React DOM components as of 0.14:

我们在此版本中进行的另一个重大更改是将 DOM 组件的引用公开为 DOM 节点本身.这意味着:我们研究了使用 React DOM 组件的 ref 可以做什么，并意识到你可以用它做的唯一有用的事情是调用 this.refs.giraffe.getDOMNode() 来获取底层 DOM 节点.从这个版本开始，this.refs.giraffe 是实际的 DOM 节点.请注意，对自定义(用户定义)组件的引用与以前完全一样；只有内置 DOM 组件会受到此更改的影响.

The other big change we’re making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a ref to a React DOM component and realized that the only useful thing you can do with it is call this.refs.giraffe.getDOMNode() to get the underlying DOM node. Starting with this release, this.refs.giraffe is the actual DOM node. Note that refs to custom (user-defined) components work exactly as before; only the built-in DOM components are affected by this change.

通过 https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#dom-node-refs

来自 GitHub 上 React 存储库的相关代码和提交:

Relevant code and commits from the React repo on GitHub:

• https://github.com/facebook/react/blob/a6d03f36a4a9e7c1e6688bdba89656f2e20e7df8/src/modern/class/ReactComponent.js#L101-L104
• https://github.com/facebook/react/commit/b46a6ce4bb8d6087ed424764f424764f4248d424768f418https://github.com/facebook/react/commit/fb23276178b28fdcb75aa271b75

• https://github.com/facebook/react/blob/a6d03f36a4a9e7c1e6688bdba89656f2e20e7df8/src/modern/class/ReactComponent.js#L101-L104
• https://github.com/facebook/react/commit/b46a6ce4bb8d6087ed424764f41fe4b8e248b3b4
• https://github.com/facebook/react/commit/fb23276178b28fdcb75aa22be013a91755f7ad0a

这篇关于React.js:findDOMNode 和 getDOMNode 的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！