Wie kann ich den Status meines untergeordneten Elements in ReactJS abrufen?

Question

Ich würde gerne wissen, wie ich den Status meines Kindes Element in dieser Situation

class Child extends React.Component{ 

    constructor(props){ 
     super(props) 

     this.state = { 
      element : "I NEED THIS STATE" 
     } 

    } 

    render(){ 
     return <h1>Hello</h1> 
    } 
} 

class Main extends React.Component{ 
    render(){ 
     return(
      <div> 
       <Child /> 
      </div> 
     ) 
    } 
} 

Answer 1

Wenn ich verstehe Sie bitte Ihren Status und die Sie benötigen können in die Hauptkomponente.

class Child extends React.Component{ 

    constructor(props){ 
     super(props) 

     this.state = { 
      element : "I NEED THIS STATE" 
     } 

    } 

    render(){ 
     this.props.checkStatus(this.state.element); 
     return <h1>Hello</h1> 
    } 
} 

class Main extends React.Component{ 
getChildStatus(status){ 
    console.log(status) 
} 
render(){ 
    return(
     <div> 
      <Child checkStatus={this.getChildStatus}/> 
     </div> 
    ) 
} 

}

Als Felix sagte, Funktion, die wir mit Requisiten werfen in der Regel auf ein Ereignis wie onClick oder onChange verwendet. Etwas wie return <h1 onClick={this.props.checkStatus(this.state.element)}>Hello</h1>

Answer 2

Einfach machen es funktioniert, können Sie es tun, wie @Andrew schlägt. Allerdings, ich stark entmutigen Sie davon, wenn Sie wirklich bewusst sind, was Sie tun.

React ermutigt unidirektionalen Datenfluss zu helfen, Ihren Code einfacher zu begründen. Eine Faustregel kann vereinfacht werden als Requisiten, Ereignisse bis.

1. Daten geht nach unten von den Eltern auf das Kind mit props (read-only Kind daran hindert, mutiert Eltern state zufällig).
2. Ereignisse sprudelt von Kindern, um seine Eltern zu informieren, was passiert ist.

In reagieren Komponentensystem, beide Eltern und Kind haben (In der Regel Eltern übergeben Funktion/Rückruf props in Kinder Event-Handler durch den Aufruf) Bereiche isoliert. Dies bedeutet, dass Eltern keine Kenntnisse über ihre Kinder haben sollten (einschließlich ihrer state in Ihrem Fall), und Kinder können Elterndaten nur durch props lesen. Um den Status für die Aktualisierung der Benutzeroberfläche zu ändern, ist this.setState() Ihr Freund, der normalerweise in Ereignishandlern/Serveranfragen verwendet wird.

zum Lesen empfohlen: https://facebook.github.io/react/docs/thinking-in-react.html

_{Btw. Die deklarative Komponentenzusammensetzung von React ist im Wesentlichen eine Funktionszusammensetzung. Ihre Frage ist ähnlich wie "Kann ich die lokalen Variablen der Schließung in der Funktion, wo es erklärt wird", offensichtlich können Sie dies tun, aber Sie müssen sich fragen, warum Sie dies tun, um die Kapselung zu brechen.}