Comment obtenir les références d'un autre composant de Réagir JS

La Réagir, l'idée principale est de passage des accessoires à la baisse des parents aux enfants (même à des niveaux plus profonds des enfants - petits-enfants, je veux dire)

Par conséquent, lorsque nous voulons le parent à faire quelque chose qui est déclenchée à partir de (ou appartient à) les enfants, nous pouvons créer une fonction de rappel dans le parent, puis le transmettre à nos enfants que les accessoires

Pour votre choix, c'est une démonstration sur la façon de passer des fonctions de rappel vers le bas à travers de nombreux niveaux, des enfants et comment les déclencher:

La Force de Réagir conteneur pour actualiser les données

Ré-initialisation de la classe sur les rediriger

Dans votre cas, vous pouvez accéder à des références auprès d'enfants de composants, comme suit: (en utilisant la chaîne de ref - comme vous l'avez dit)

Composant Parent:

import React, { Component } from 'react';
//import Child component here
export default class Parent extends Component {
constructor(props){
super(props);
//...
this.getRefsFromChild = this.getRefsFromChild.bind(this);
}    
getRefsFromChild(childRefs) {
//you can get your requested value here, you can either use state/props/or whatever you like based on your need case by case
this.setState({
myRequestedRefs: childRefs
});
console.log(this.state.myRequestedRefs); //this should have *info*, *contact* as keys
}    
render() {
return (
<Child passRefUpward={this.getRefsFromChild} />
)
}  
}

Composant Enfant:

import React, { Component } from 'react';
export default class Child extends Component {
constructor(props){
super(props);
//...
}    
componentDidMount() {
//pass the requested ref here
this.props.passRefUpward(this.refs);
}    
render() {
return (
<div className="homeMain">
<section ref="info"> <Info/> </section>
<section ref="contact"> <Contact /> </section>
</div>          
)
}  
}  

OriginalL'auteur thinhvo0108

Selon Les références aux Composants, basée sur une chaîne refs -- alors que pas obsolète - sont remplacées par le rappel de base de la syntaxe, par exemple:

<section ref={sectionElement => this.sectionElement = sectionElement}>
<Info/>
</section>

La chaîne ref est susceptible d'être obsolète rapidement, ce qui implique aussi que this.refs. En tant que tel, je vous recommande de les prendre en compte, et de fournir des méthodes d'instance ou propriétés pour exposer les refs de la place:

class HomePage extends Component {
render() {
return (
<div className="homeMain">
<section ref={infoSection => this.infoSection = infoSection}>
<Info/>
</section>
<section ref={contactSection => this.contactSection = contactSection}>
<Contact />
</section>
</div>
);
}
}

Après cela, vous aurez besoin d'obtenir un ref à HomePage ainsi, sur lequel vous pouvez ensuite accéder à infoSection et contactSection en tant que propriétés, que vous pouvez ensuite passer comme des accessoires de Header, par exemple:

<HomePage ref={homePage => this.homePage = homePage} ... />
<Header sections={[this.homePage.infoSection, this.homePage.contactSection]} ... />

Votre application exacte de la structure est inconnu pour moi, mais le principe général valable partout: exposer refs par exemple des méthodes ou des propriétés, obtenir un ref à la composante de l'exposer ses refs, puis accéder à l'intérieur refs par l'exposé des propriétés.

Modifier

Si vous souhaitez garder l'aide de la chaîne à base de refs pour l'instant au lieu de cela, vous pouvez définir un getter (bien que refs devraient être directement accessibles):

Object.defineProperty(this, "infoSection" {
get: () => this.refs["infoSection"]
});

OriginalL'auteur John Weisz