React 0.13 this.getDOMNode() 等价于 React.findDOMNode()答案

【问题标题】：React 0.13 this.getDOMNode() equivalent to React.findDOMNode()React 0.13 this.getDOMNode() 等价于 React.findDOMNode()
【发布时间】：2015-06-14 03:48:04
【问题描述】：

这在 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 节点。这可能吗？

【问题讨论】：

标签： reactjs

【解决方案1】：

更新 React v0.14+

在 React v0.14+ this has changed 中，您现在应该使用 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>

【讨论】：

【解决方案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中所述

【讨论】：

【解决方案3】：

React 15.0.1 需要这种语法：ReactDOM.findDOMNode

例如

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

【讨论】：

【解决方案4】：

对于更复杂的元素，例如在标准 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 获取想要的输入元素。该解决方案适用于任何复杂的组件，我们始终可以在其中进行查询。在 React (15.3.2) 上测试。

【讨论】：

【解决方案5】：

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

【讨论】：