Réagir: quelle est la bonne manière de passer une ref à une béquille?

Je suis en train de passer une ref d'un composant à un autre composant. Depuis chaîne de refs sont désapprouvées je suis en utilisant le rappel réf.

Donc, j'ai quelque chose de similaire à ceci:

<One ref={c => this.one = c}/>
<Two one={this.one}/>

Le problème est qu'à chaque fois que j'essaie d'accéder à this.props.one à l'intérieur de Two - je obtenir undefined.

J'ai même essayé ce Two:

componentDidMount(){
    setTimeout(()=>{
        console.log(this.props.one);
    },5000)
}

Il semble que le problème est que, lorsque l'hélice est créé, l'arbitre n'existe pas encore car il est créé une fois que One est monté. Mais je ne sais pas comment faire pour "rafraîchir" les accessoires sur Two pour obtenir la ref de la montée de la composante.

Donc quelle est la bonne manière de passer une ref à un autre composant?

Modifier

Certains utilisateurs ont suggéré d'encapsuler la logique dans un composant plus élevé, ce qui rend ceux d'autres composants enfants.

Le problème avec cette approche est que vous ne pouvez pas créer de réutilisables logique, et vous devez répéter la même logique dans ceux de l'encapsulation des composants.

Disons que vous voulez créer un générique <Form> composant qui encapsule les soumettre logique de votre magasin, la vérification des erreurs, etc. Et vous faites quelque chose comme cela:

<Form>
    <Input/>
    <Input/>
    <Input/>
    <Input/>
    <SubmitButton/> 
</Form>

Dans cet exemple <Form> ne peut pas accéder aux instances (et les méthodes) de l'enfant depuis this.props.children n'est pas le retour de ces instances. Il retourne quelques liste de pseudo composants.

Alors, comment pouvez-vous vérifier si un certain <Input/> a détecté une erreur de validation sans passer un ref?

Vous avez pour encapsuler les composants dans un autre composant avec la logique de validation. Par exemple, dans <UserForm>. Mais étant donné que chaque forme est différente de la même logique doit être copié dans <CategoryForm>, <GoupForm>, etc. C'est terriblement inefficace, c'est pourquoi je veux pour encapsuler la logique de validation dans <Form> et de passer des références de la <Input> composants <Form>.

OriginalL'auteur Pier | 2016-08-10