在带有响应的路由器v4中从具有链接的父组件传递道具到子组件

Question

I have Layout, Header and LogIn Component where Layout is parent to Header while Header contains <Link> to LogIn component. 我有Layout，Header和LogIn组件，其中Layout是Header的父级，而Header包含LogIn组件的<Link> 。 Now all I want to pass is a props to LogIn from Layout component. 现在我要传递的只是从Layout组件登录的道具。 Here is my Layout Component: 这是我的布局组件：

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 Component I can access both the props and it looks like this: 在页眉组件中，我可以访问两个道具，它看起来像这样：

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

Now all I want is to pass this props to my Signup Component to access this.props.signUp . 现在，我要做的就是将此道具传递给我的注册组件以访问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>

    );
}

I am not sure if this is right approach or missing something? 我不确定这是正确的方法还是缺少某些东西？ Since this is my learning project first for React looking for some suggestion. 因为这是我的第一个针对React的学习项目，所以需要一些建议。

Answer 1

Essentially, you can't pass a method through a Link component. 本质上，您不能通过Link组件传递方法。 You can pass down methods when you are rendering the Route components, but other than that not much else you can do. 您可以在渲染Route组件时传递方法，但除此之外，您还可以做很多其他事情。 Example 例

If that is something you are able to accomplish with the structure of your react components, great! 如果这是您能够使用反应组件的结构完成的事情，那就太好了！ If not, I suggest you look into doing some sort of pub/sub functionality, like redux (or roll your own if your need is simple enough). 如果没有，我建议您考虑做某种发布/ 订阅功能，例如redux （如果您的需求足够简单，则可以自己滚动）。

在带有响应的路由器v4中从具有链接的父组件传递道具到子组件

问题描述

1 个解决方案

解决方案1
0 2017-06-16 16:05:16

在带有响应的路由器v4中从具有链接的父组件传递道具到子组件

问题描述

1 个解决方案

解决方案1 0 2017-06-16 16:05:16

解决方案1
0 2017-06-16 16:05:16