Reagieren JS pass Zustand ändern Funktion für Kind

Question

Ich arbeite derzeit an einer Reaktion js Projekt für eine meiner Klassen und kann nicht scheinen, herauszufinden, wo ich falsch liege. Ich kann dafür keinen Code posten, und ich verstehe, dass dies die Antwort auf diese Frage ziemlich schwierig macht, aber hier ist mein Problem.

Ich habe eine Elternfunktion, die einen Zustand hat, der zwischen 3 verschiedenen möglichen Komponenten entscheidet, um als die Seite abhängig von der Statusvariablen 'currentPage' zu rendern. In dieser übergeordneten Komponente habe ich Funktionen erstellt, die die currentPage Statusvariable ändern. Ich versuche diese zustandsverändernden Funktionen durch Requisiten zu übergeben und sie dann innerhalb der Child-Komponenten aufzurufen, um den Status des Parents zu ändern und die Seite neu zu rendern. Zum Beispiel habe ich eine Funktion namens signup, die die currentPage in 'signup' ändert, also habe ich <Login goToSignup = {this.signup} />. In meiner Login-Komponente versuche ich dann, den Klick auf eine Schaltfläche zu setzen: onClick = {this.props.goToSignup}. Aber das scheint nicht zu funktionieren. Ich bin sehr neu zu reagieren und verstehe vielleicht nicht, wie ich das machen soll, also würde jede Hilfe sehr geschätzt werden.

Answer 1

In diesem Beispiel gibt es 3 Komponenten Detail, Post, XYZ und eine übergeordnete Komponente App. Auf der Basis von state Wert in Eltern, rendering die andere Komponente. In allen 3 Komponenten übergibt eine function, die verwendet wird, um den currentPage Statuswert in der übergeordneten Komponente zu ändern.

Für Stateless Functional Component, überprüfen Sie die DOC.

prüfen dieses Beispiel:

var Post = (props) => { 
 
    return <div onClick={()=>props.changeComponent('detail')}> POST </div> 
 
} 
 
var Detail = (props) => { 
 
    return <div onClick={()=>props.changeComponent('xyz')}> DETAIL </div> 
 
} 
 
var XYZ = (props) => { 
 
    return <div onClick={()=>props.changeComponent('post')}> XYZ </div> 
 
}  
 

 
class App extends React.Component{ 
 

 
    constructor(){ 
 
     super(); 
 
     this.state = {currentPage: 'post'} 
 
     this.changeComponent = this.changeComponent.bind(this) 
 
    } 
 
    
 
    changeComponent(currentPage){ 
 
     this.setState({currentPage}); 
 
    } 
 
    
 
    renderTab(){ 
 
     switch(this.state.currentPage){ 
 
     case 'post': return <Post changeComponent={this.changeComponent}/> 
 
     case 'detail': return <Detail changeComponent={this.changeComponent}/> 
 
     case 'xyz': return <XYZ changeComponent={this.changeComponent}/> 
 
     } 
 
    } 
 
    
 
    render(){ 
 
     return(
 
     <div> 
 
      {this.renderTab()} 
 
      <div style={{marginTop: 100}}>*Click on Page name to render different page</div> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App/>, 
 
    document.getElementById('app') 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'>

aktualisieren (OP in es5 für gleiche Beispiel gefragt)

Elbe Beispiel in ES5 geschrieben (weiß nicht viel über es5 , korrigieren Sie mich, wenn ich einen Fehler gemacht habe):

function Post(props) { 
 
    return <div onClick={()=>props.changeComponent('detail')}> POST </div> 
 
} 
 
function Detail(props){ 
 
    return <div onClick={()=>props.changeComponent('xyz')}> DETAIL </div> 
 
} 
 
function XYZ(props){ 
 
    return <div onClick={()=>props.changeComponent('post')}> XYZ </div> 
 
}  
 

 
var App = React.createClass({ 
 

 
    getInitialState: function(){ 
 
     return (
 
      {currentPage: 'post'} 
 
    ) 
 
    }, 
 
    
 
    changeComponent: function(currentPage){ 
 
     this.setState({currentPage}); 
 
    }, 
 
    
 
    renderTab: function(){ 
 
     switch(this.state.currentPage){ 
 
     case 'post': return <Post changeComponent={this.changeComponent}/> 
 
     case 'detail': return <Detail changeComponent={this.changeComponent}/> 
 
     case 'xyz': return <XYZ changeComponent={this.changeComponent}/> 
 
     } 
 
    }, 
 
    
 
    render: function(){ 
 
     return(
 
     <div> 
 
      {this.renderTab()} 
 
      <div style={{marginTop: 100}}>*Click on Page name to render different page</div> 
 
     </div> 
 
    ) 
 
    } 
 
}) 
 

 
ReactDOM.render(
 
    <App/>, 
 
    document.getElementById('app') 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'>