Comment accéder aux références d'un composant enfant dans le composant parent

Si j'ai quelque chose comme

<Parent>
  <Child1 />
  <Child2 />
  <Child3 />
</Parent>

Et je veux accéder à partir de Child2 où j'ai refs="child2refs"comment puis-je le faire?

source d'informationauteur user1354934

  1. 7

    Premier accès des enfants avec: this.props.childrenchaque enfant aura alors son ref comme une propriété sur elle.

  2. 25

    Si elle ne peut pas être évitée le modèle proposé extrait de la Réagir docs serait:

    import React, {Component} from 'react';

const Child = ({setRef}) => <input type="text" ref={setRef} />;

class Parent extends Component {
    constructor(props) {
        super(props);
        this.setRef = this.setRef.bind(this);
    }
    componentDidMount() {
        //Call function on Child dom element
        this.childInput.focus();
    }
    setRef(input) {
        this.childInput = input;
    }
    render() {
        return <Child setRef={this.setRef} />
    }
}

    La Parent passe d'une fonction comme accessoire lié à Parent's this. Réagir fera appel à la Enfant's ref rappel setRef et fixez le childInput propriété this qui comme nous l'avons déjà noté les points à l' Parent.

  3. 8
    1. À l'intérieur du composant enfant ajouter une ref pour le nœud que vous avez besoin
    2. À l'intérieur du composant parent ajouter une ref pour le composant enfant.
    /*
* Child component
*/
class Child extends React.Component {
  render() {
    return (
      <div id="child">
        <h1 ref={(node) => { this.heading = node; }}>
          Child
        </h1>
      </div>
    );
  }
}

/*
 * Parent component
 */
class Parent extends React.Component {
  componentDidMount() {
    //Access child component refs via parent component instance like this
    console.log(this.child.heading.getDOMNode());
  }

  render() {
    return (
      <div>
        <Child
          ref={(node) => { this.child = node; }}
        />
      </div>
    );
  }
}

    Démo: https://codepen.io/itsfadnis/pen/aLWVVx?editors=0011