Zugriff auf Refs eines Geschwisters Komponente in Reaktion

Question

ich diese Situation haben, wo ich zwei Geschwister Komponenten aufweisen, wobei die erste Komponente erscheint wie folgt:

class X extends Component { 

    someRenderMethod(){ 
     //does something 
    } 

    render(){ 
     return(
      <div class="xyz"> 
      <p>some text</p> 
      <div class="the-div-i-want-render" ref="one"> 
        {this.someRenderMethod} 
      </div> 
      </div> 
    ) 
    } 
} 

function mapStateToProps(){ 
    // 
} 

function mapDispatchToProps(){ 
    // 
} 

export default connect(mapStateToProps, mapDispatchToProps)(X); 

Meine zweite Geschwister Komponente wie folgt:

import X from './x' 

    export class Y extends Component { 

     render(){ 
      return (
       <div> 
        <div> 
         //Here I want to render the div inside //component X 
         // In the real case, I show the div here in     //response to a button click event. 
         //I have tried to import the component and get   //the refs of X, but that is not working. 
        </div> 

       </div> 

      ) 
     } 
    } 

Ich habe versucht, die Komponente X in Y zu importieren und die Referenzen von X zu bekommen, aber das funktioniert nicht (das ref-Objekt ist immer Null). Gibt es einen anderen Weg, wo ich das erreichen kann?

Answer 1

Durch den Import X importieren Sie nur die Klasse für die Komponente. Nicht die Instanz davon (https://en.wikipedia.org/wiki/Class_(computer_programming))

A-Komponenten refs sind nicht verfügbar, bis die Komponente bereitgestellt wurde (einmal gerendert). Daher haben Sie zum ersten Mal Zugriff auf das Objekt refs in den Komponenten componentDidMount Lebenszyklusfunktion.

Um Ihr Problem anzugehen: Komponente X muss seine refs den Baum zu einer übergeordneten Komponente kommunizieren. Das übergeordnete Element rendert beide, X und Y. Wenn X bereitgestellt wurde, können Sie einen Rückruf von Ihrem übergeordneten Container aufrufen, indem Sie refs als Argument übergeben. Der Elternteil kann nun darauf reagieren und das refs Objekt über props an Y übergeben. Sie können den lokalen Status this.state/setState verwenden, um problemlos das erneute Rendern von Y zu erreichen, nachdem X geladen wurde.