React 0.13 this.getDOMNode() эквивалентно React.findDOMNode()

Это отлично работает в версии React версии 0.12:

componentDidMount: function () {
    var dom = this.getDOMNode();
}

Переменная dom получает фактический DOM node для визуализированного компонента. Однако преобразование этого в React 0.13 не работает должным образом:

componentDidMount: function () {
    var dom = React.findDOMNode();
    // dom is undefined
}

Я пробовал React.findDOMNode(this), который тоже не работает. В основном я просто пытаюсь получить dom dom node, отображаемый функцией рендеринга, без использования ссылки. Возможно ли это?

Ответы

Ответ 1

Update 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" />

Ответ 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

Для более сложных элементов, таких как компоненты React, созданные на стандартных элементах DOM refs, мы получаем только первый элемент DOM (корневой элемент компонента), поэтому иногда нам нужно найти желаемый node внутри него. Хороший пример: Материал-Ui TextField и как мы можем получить от него значение.

1. Необходимый импорт

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 получаем желаемый элемент ввода. Это решение работает с любыми сложными компонентами, мы всегда можем запросить его внутри. Протестировано при реагировании (15.3.2).

Ответ 5

Я думаю, что вам не нужно использовать ReactDOM.findDOMNode, вы можете использовать простой e.target.innerHTML. В этом варианте вам не нужно импортировать ReactDOM.