0
Ich habe Layout, Header und LogIn-Komponente wo Layout ist übergeordnet zu Header während Header enthält <Link> zu LogIn-Komponente. Jetzt möchte ich nur eine Requisite für LogIn aus der Layout-Komponente übergeben. Hier ist meine Layout-Komponente:Requisiten von Elternkomponente mit Link zu Kindkomponente in Reagieren Router v4
signup(email, password) {
return this.handleAuth(when(request({
url: 'http://localhost:3001/users',
method: 'POST',
crossOrigin: true,
type: 'json',
data: {
"user":{"email":email,"password":password} }
})));
}
handleAuth(loginPromise) {
return loginPromise
.then(function(response){
jwt = response.jwt;
localStorage.setItem('jwt', jwt);
this.setState({isLoggedIn:true});
});
}
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React on Rails API</h2>
</div>
<Body />
<Header signUp={this.signup.bind(this)} logIn={this.login.bind(this)}/><br/><br/>
<Footer/>
</div>
);
}
In Header-Komponente kann ich die Requisiten zugreifen beide, und es sieht wie folgt aus:
render() {
console.log(this.props.signUp);
return (
<header>
<br/>
<div className="container">
<div className="row">
<Link to='login' className="button six columns">SignIn</Link>
<Link to='signup' className="button six columns">SignUp</Link>
</div>
</div>
</header>
);
}
Jetzt alles, was ich will, ist diese Requisiten zu meinem Anmelden Komponente zu übergeben Zugang this.props.signUp.
Ich bin mir nicht sicher, ob das richtige Ansatz ist oder etwas fehlt? Da dies mein Lernprojekt ist, suche ich zuerst nach React.