React 0.13 this.getDOMNode() 相当于 React.findDOMNode()

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) 也不管用。基本上我只是试图在不使用 ref 的情况下获取由渲染函数渲染的顶级 dom 节点。这可能吗？

Answer 1

更新 React v0.14+

在 React v0.14+ this has changed, you should now use the 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" />

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>

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

例如

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

Answer 4

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

1.Required 进口

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

2.Virtual dom 和 ref="variable"

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

3.Query 里面的 TextField:

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

或多行：

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

我们从 TextField 容器开始并使用标准 DOM 查询 querySelector 获取想要的输入元素。该解决方案适用于任何复杂的组件，我们始终可以在其中进行查询。在 React (15.3.2).

上测试

Answer 5

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

React 0.13 this.getDOMNode() 相当于 React.findDOMNode()

React 0.13 this.getDOMNode() equivalent to React.findDOMNode()

reactjs