传递来自父组件的道具与链接到反应路由器中的子组件v4

我有布局，标题和登录组件，其中布局是父标头，而标头包含登录组件的<Link>。现在我想传递的是一个从Layout组件到LogIn的道具。这是我的布局组件：传递来自父组件的道具与链接到反应路由器中的子组件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> 
    ); 
}

在标题组件，我可以同时访问的道具，它看起来像这样：

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> 
    ); 
}

现在我想的是通过这个道具，我注册的Component访问this.props.signUp。

signup(e) { 
    e.preventDefault(); 
    console.log(this.state.registerValues); 
    this.props.signUp(this.state.registerValues.email,this.state.registerValues.password, this.state.registerValues.conform) 
     .catch(function(err) { 
      console.log("Error logging in", err); 
     }); 
} 

render() { 
    return (
    <div className="row"> 
     <div className="three column"></div> 
     <div className="six columns"> 
      <h1>Signup</h1> 
      <form> 
       <div className="form-group"> 
        <label htmlFor="username">Email</label> 
        <input type="text" value={this.state.registerValues['email']} onChange={this.handleChangeevent.bind(this)} className="form-control" name="email" placeholder="email" required/> 
       </div> 
       <div className="form-group"> 
        <label htmlFor="password">Password</label> 
        <input type="password" value={this.state.registerValues['password']} onChange={this.handleChangeevent.bind(this)} className="form-control" name="password" id="password" ref="password" placeholder="Password" required /> 
       </div> 
       <div className="form-group"> 
        <label htmlFor="password">Password again</label> 
        <input type="password" value={this.state.registerValues['conform']} onChange={this.handleChangeevent.bind(this)} className="form-control" name="conform" placeholder="Password again" required/> 
       </div> 
       <button type="submit" className="btn btn-default" onClick={this.signup.bind(this)}>Submit</button> 
      </form> 
     </div> 
     <div className="three column"></div> 
    </div> 

    ); 
}

我不知道这是否是正确的做法还是失去了一些东西？由于这是我第一次为React寻找一些建议的学习项目。

来源

2017-06-16 surajnew55

本质上，您不能通过链接组件传递方法。在渲染Route组件时，您可以传递方法，但除此之外您可以执行其他任何操作。 Example

如果这是你能够用反应组件的结构完成的事情，太棒了！如果不是这样，我建议你考虑做一些pub/sub功能，比如redux（或者如果你的需求足够简单，请自行推出）。

来源

2017-06-16 16:05:16

传递来自父组件的道具与链接到反应路由器中的子组件v4

回答

相关问题