Obtenir un nœud DOM à partir d’un élément enfant React

En utilisant la méthode React.findDOMNode introduite en v0.13.0, je peux obtenir le noeud DOM de chaque composant enfant transmis à un parent en mappant this.props.children .

Cependant, si certains enfants sont des éléments de réaction plutôt que des composants (par exemple, un des enfants est un

créé via JSX), React génère une erreur de violation invariante.

Existe-t-il un moyen d’obtenir le nœud DOM correct de chaque enfant après le assembly, quelle que soit la classe de l’enfant?

this.props.children doit être un ReactElement ou un tableau de ReactElement, mais pas de composants.

Pour obtenir les noeuds DOM des éléments enfants, vous devez les cloner et leur atsortingbuer une nouvelle ref.

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

Vous pouvez ensuite accéder aux composants enfants via this.refs[childIdx] et récupérer leurs noeuds DOM via ReactDOM.findDOMNode(this.refs[childIdx]) .

Si vous voulez accéder à un élément DOM, ajoutez simplement l’atsortingbut ref et vous pouvez accéder directement à cet élément.

  

Et puis vous pouvez directement:

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

Il n’est pas nécessaire d’utiliser ReactDOM.findDOMNode() si vous avez ajouté une ref à un élément.

Cela peut être possible en utilisant l’atsortingbut refs.

Dans l’exemple de vouloir atteindre un

ce que vous voudriez faire est d’utiliser

. Vous pourrez alors obtenir ce noeud DOM en utilisant React.findDOMNode(this.refs.myExample) .

A partir de là, obtenir le bon nœud DOM de chaque enfant peut être aussi simple que celui de this.refs.myExample.children (je ne l’ai pas encore testé) mais vous pourrez au moins saisir n’importe quel nœud enfant monté spécifique en utilisant l’atsortingbut ref.

Voici la documentation officielle de la réaction sur les références pour plus d’informations.

React.findDOMNode(this.refs.myExample) mentionné dans une autre réponse a été déprécié.

utilisez ReactDOM.findDOMNode de 'react-dom' ReactDOM.findDOMNode 'react-dom' place

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

J’ai trouvé un moyen facile d’utiliser les nouvelles références de rappel. Vous pouvez simplement transmettre un rappel en tant que prop au composant enfant. Comme ça:

 class Container extends React.Component { constructor(props) { super(props) this.setRef = this.setRef.bind(this) } setRef(node) { this.childRef = node } render() { return  } } const Child = ({ setRef }) => ( 
)

Voici un exemple de faire cela avec un modal:

 class Container extends React.Component { constructor(props) { super(props) this.state = { modalOpen: false } this.open = this.open.bind(this) this.close = this.close.bind(this) this.setModal = this.setModal.bind(this) } open() { this.setState({ open: true }) } close(event) { if (!this.modal.contains(event.target)) { this.setState({ open: false }) } } setModal(node) { this.modal = node } render() { let { modalOpen } = this.state return ( 
{ modalOpen ? : null }
) } } const Modal = ({ close, setModal }) => (
)