Question

我的父组件：

class Main extends Component {
    constructor(props) {
        super(props);

        this.state = {
            docked: false,
            open: false,
            transitions: true,
            touch: true,
            shadow: true,
            pullRight: false,
            touchHandleWidth: 20,
            dragToggleDistance: 30,
            currentUser: {}
        };

        this.renderPropCheckbox = this.renderPropCheckbox.bind(this);
        this.renderPropNumber = this.renderPropNumber.bind(this);
        this.onSetOpen = this.onSetOpen.bind(this);
        this.menuButtonClick = this.menuButtonClick.bind(this);
        this.updateUserData = this.updateUserData.bind(this);
    }
updateUserData(user){
        this.setState({
            currentUser: user
        })
    }
    render() { 
            return (
                <BrowserRouter>
                    <div style={styles.content}>
                        <div className="content">
                            <Switch>

                                    <Route path="/login/:code/:state" component={Login} updateUserData = {this.updateUserData}/>
                                    <Route path="/dashboard" component={Login}/>
                            </Switch>
                        </div>
                    </div>
                </BrowserRouter>
            )
        }

    }

我的孩子（登录）组件：

class Login extends Component{
    constructor(props) {
        super(props);
        this.state = {
            linkedInUrl: ''
        };
    }
    componentWillMount(){
        const query = new URLSearchParams(this.props.location.search);

        if(query.get('code') && query.get('state')){
            const code = query.get('code');
            axios.post(Globals.API + '/user/saveUser', {
                code: code,
            })
                .then((response) => {
                    if(response.data.success == true){
                        this.props.updateUserData(response.data.user);
                    }
                })
                .catch((error) => {
                    console.log(error);
                })
        }

    }
render() {
        const { linkedInUrl } = this.state;
        return (
            <div className="panel center-block" style={styles.panel}>
                <div className="text-center">
                    <img src="/images/logo.png" alt="logo" style={styles.logo}/>
                </div>
                <div className="panel-body">
                    <a href={linkedInUrl} className="btn btn-block btn-social btn-linkedin">
                        <span className="fa fa-linkedin"></span>
                        Sign in with LinkedIn
                    </a>
                </div>
                <div className="panel-footer">

                </div>
            </div>
        )
    }

当我在Main组件中获得响应时，我正尝试从Login组件更新currentUser对象，并且还能够从currentUser组件中访问Main对象{1}}（基本上来自我的整个应用）。但this.props组件中的Login为空，我也无法this.props.updateUserData(response.data.user);。有谁能告诉我为什么好吗？谢谢大家的时间！

Answer 1

因为您未将任何props传递给Login组件。因此，要使其正常运行，您不应在component组件上使用Route道具。而不是你应该使用render prop，它需要一个返回组件的函数或者jsx并不重要。有关Route组件的更多信息，请查看here。

所以替换这条路线

<Route
  path="/login/:code/:state"
  component={Login}
  updateUserData = {this.updateUserData}
/>

对于这样的事情，使用render prop：

<Route
  path="/login/:code/:state"
  render={() => <Login updateUserData={this.updateUserData} currentUser= {this.state.currentUser} />}
/>

Worked example

Here是如何使用react-router将props传递到Route组件的更多示例。

希望它会有所帮助

父组件和子组件之间的ReactRouter通信

1 个答案: