重定向时如何将道具发送到reactjs [英] How to send props to reactjs when Redirect

问题描述

我试图在通过 React Route(重定向到)重定向​​到路由时发送道具，但组件(SideBar)没有收到任何道具.我应该如何发送道具以及如何在组件中接收道具?我想从当前状态发送一个道具.

父组件(WelcomeScreen.tsx)

render(){返回 (this.state.idUser != -1 ?<重定向到={{路径名:'/活动'，状态:{ 推荐人:this.state.idUser }}}/>:<div>{this.renderHeader()}
{this.renderPanelUpButtons()}{this.renderWelcomeMenu()}

);

活动.tsx

export interface ActivitiesProps {idUser:号码；}接口活动状态{消息:字符串；活动第一部分:IActivity[];活动第二部分:IActivity[];}componentWillReceiveProps(newprops : ActivitiesProps){if(newprops!== this.props){this.props = newprops;}}

这里的组件不会收到任何道具.

为了更容易理解，我还列出了路线；

render() {返回 (<div className="hangouts-body"><div><Route path="/" exact={true} component={WelcomeScreen}/><Route path="/Groups" exact={true} component={Groups}/><Route path="/Activities" exact={true} component={Activities}/><Route path="/OneActivity" exact={true} component={OneActivity}/>

);}

解决方案

在 React 中通过 url 获取 props 有点不同.以下几行简要说明了该过程

路线部分:

<Route path="/Activities/:idUser" exact={true} component={Activities}/>

重定向部分:

获取道具部分

props.match.params.idUser

I'm trying to send props when redirecting to a route via React Route (Redirect to) but the component(SideBar) does not receive any props. How should I send props and how do I receive props in the component? I want to send a prop from the current state.

ParentComponent (WelcomeScreen.tsx)

render(){

    return (  
        this.state.idUser != -1 ?  <Redirect to={{
            pathname: '/Activities',
            state: { referrer: this.state.idUser }
            }}/> :   
        <div>
            {this.renderHeader()}
            <div className='screenUser'>
                {this.renderPanelUpButtons()}
                {this.renderWelcomeMenu()}
            </div>
        </div>

    );

Activities.tsx

export interface ActivitiesProps {
idUser: number;
}

interface ActivitiesState {  
message: string;
activitiesFirstPart: IActivity[];
activitiesSecondPart: IActivity[];
}

componentWillReceiveProps(newprops : ActivitiesProps){
    if(newprops!== this.props){
        this.props = newprops;
    }

}

Here the component will not receive any props.

To be easier to understant I put also the routes;

render() {
    return (
        <div className="hangouts-body">
            <div>
                <Route path="/" exact={true} component={WelcomeScreen} />
                <Route path="/Groups" exact={true} component={Groups} />
                <Route path="/Activities" exact={true} component={Activities} />
                <Route path="/OneActivity" exact={true} component={OneActivity} />
            </div>
        </div>
    );
}

解决方案

Getting props via url is a bit different in React. The following lines explain the process in a nutshell

routes part:

<Route path="/Activities/:idUser" exact={true} component={Activities} />

redirect part:

<Redirect to={`/Activities/${this.state.idUser}`}/>

getting props part

props.match.params.idUser

这篇关于重定向时如何将道具发送到reactjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！