Получение DOM node из дочернего элемента React

Используя метод React.findDOMNode, который был введен в v0.13.0, я могу получить DOM node каждого дочернего компонента, который был передан в родительский объект, путем сопоставления над this.props.children.

Однако, если некоторые из дочерних элементов являются элементами React, а не компонентами (например, один из дочерних элементов - это <div>, созданный с помощью JSX). React вызывает ошибку нарушения инварианта.

Есть ли способ получить правильный DOM node каждого ребенка после монтирования независимо от того, какой класс является дочерним?

Ответы

Ответ 1

this.props.children должен быть либо ReactElement, либо массивом ReactElement, но не компонентами.

Чтобы получить узлы DOM дочерних элементов, вам необходимо клонировать их и назначить им новый номер ссылки.

render() {
  return (
    <div>
      {React.Children.map(this.props.children, (element, idx) => {
        return React.cloneElement(element, { ref: idx });
      })}
    </div>
  );
}

Затем вы можете получить доступ к дочерним компонентам через this.refs[childIdx] и получить свои узлы DOM через ReactDOM.findDOMNode(this.refs[childIdx]).

Ответ 2

Если вы хотите получить доступ к любому элементу DOM, просто добавьте атрибут ref, и вы можете напрямую получить доступ к этому элементу.

<input type="text" ref="myinput">

И затем вы можете напрямую:

componentDidMount: function() 
{
    this.refs.myinput.select();

},

Их не нужно использовать ReactDOM.findDOMNode(), если вы добавили ref к любому элементу.

Ответ 3

Это может быть возможно с помощью атрибута refs.

В примере, когда вам нужно достичь <div>, вам нужно будет использовать <div ref="myExample">. Тогда вы сможете получить этот DOM node с помощью React.findDOMNode(this.refs.myExample).

Оттуда получение правильного DOM node каждого дочернего элемента может быть таким же простым, как отображение над this.refs.myExample.children (я еще не тестировал это), но вы, по крайней мере, сможете захватить какой-либо конкретный дочерний элемент node с помощью атрибута ref.

Здесь официальная реагирует на документацию по refs для получения дополнительной информации.

Ответ 4

React.findDOMNode(this.refs.myExample), упомянутый в другом ответе, был отброшен.

используйте ReactDOM.findDOMNode из 'react-dom' вместо

import ReactDOM from 'react-dom'
let myExample = ReactDOM.findDOMNode(this.refs.myExample)