Wie greife ich Refs einer untergeordneten Komponente in der übergeordneten Komponente

Question

Wenn ich so etwas wie

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

Und ich will von Child2 zugreifen, wo ich refs="child2refs" haben, wie kann ich das tun?

Answer 1

Zuerst greifen Sie die Kinder mit: this.props.children, jedes Kind wird dann seine ref als Eigentum haben.

Answer 2

Wenn es nicht das vorgeschlagene Muster aus dem React docs extrahiert vermieden werden würde:

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

Die Eltern gibt eine Funktion als Stütze gebunden Eltern ‚s this. Reagieren Sie rufen die Kinder ‚s ref Rückruf setRef und befestigen Sie die childInput Eigenschaft auf this die, wie wir bereits Punkte auf dem Elternteil bemerkt.

Answer 3

1. Innerhalb der untergeordneten Komponente hinzufügen ref an den Knoten Sie
2. Innerhalb der übergeordneten Komponente eine ref an die untergeordnete Komponente hinzufügen.

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