Come posso accedere arbitri di un componente secondario nel componente genitore

Question

Se ho qualcosa di simile

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

E voglio accedere da Child2 dove ho refs="child2refs", come posso farlo?

Answer 1

Primo accesso ai bambini con: this.props.children, ogni bambino avrà quindi il proprio ref come proprietà.

Answer 2

Se non può essere evitato il modello proposto estratto dal React docs sarebbe:

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} /> 
    } 
} 

Il Parentpassa una funzione come puntello vincolato al genitore s' this. Reagire chiamerà il Bambino s' ref callback setRef e collegare la proprietà childInput a this che, come abbiamo già notato punti al genitore.

Answer 3

1. All'interno della componente figlio aggiungere un ref al nodo è necessario
2. All'interno della componente principale aggiungere un ref per il componente figlio.

/* 
* 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> 
    ); 
    } 
} 

Demo: https://codepen.io/itsfadnis/pen/aLWVVx?editors=0011