如何使用链接（react-router）将道具从一个页面传递到类组件

Posted 2023-04-14

【中文标题】如何使用链接（react-router）将道具从一个页面传递到类组件

【英文标题】：How to pass props from one page using a Link(react-router) to a class component

【发布时间】：2021-03-01 13:07:00

【问题描述】：

我在页面中有一个链接，我希望它将道具传递给作为类组件的路由组件，我该怎么做？这是我到目前为止所做的代码：

链接所在的文件：

<List
    itemLayout="horizontal"
    dataSource=classes
    renderItem=item => (
        <List.Item>
            <List.Item.Meta
                title = 
                    <Link 
                        to=
                           pathname : "/Class",
                           state: Name: item.Name
                        
                        className="ListItem"
                    >
                        item.Name
                    </Link>
                 
             />
         </List.Item>
       )
/>

这是我存储所有路由的 index.js，我还有一个上下文。提供者：

ReactDOM.render(
    <Provider store= store>
      <Router>
        <Layout>
          <Switch>
              <Route component=LandingPage exact path="/" />
              <Route path="/dashboard" >
                <UserProvider>
                  <Dashboard/>
                </UserProvider>
              </Route>
              <Route path="/Class" >
                <UserProvider>
                  <Class/>
                </UserProvider>
              </Route>
              <Route component=NewMessage path="/New-Message" />
              <Route path="/Inbox" >
                <UserProvider>
                  <Inbox/>
                </UserProvider>
              </Route>
              <Route path="/Outbox" >
                <UserProvider>
                  <Outbox/>
                </UserProvider>
              </Route>
              <Route component=ResetPassword path="/reset-password" />
              <Route component=ResetPasswordConfirmed path="/reset/password/confirm/:uid/:token" />
              <Route component=Signup path="/signup" />
              <Route component=Activate path="/activate/:uid/:token" />
            
          </Switch>
        </Layout>
      </Router>
    </Provider>,
  document.getElementById('root')
);

这是链接指向的文件（Class.js）：

class Class extends React.Component 
    
    static contextType = userContext
    
    state = 
        Curriculum: [],
        Classworks: [], 
        Homeworks: [],
        activeClass: ""
    

    componentDidMount() 
        
        const  state  = props.location.state

        this.setState(
            activeClass: state
        );
        console.log(this.state.activeClass);        
      

    render()
        
            const  user_data, classes  = this.context
            return(
            <div className="back">
            <Navbar/>
            this.state.activeClass
            <main className= "MainContent">
                <div className="Class">
                    <h2 className="class">
                    </h2>
                </div>
            </main>
            <br/>
            <footer className="Footer">Designed by Eng. Omar Redwan</footer>
        </div>
        )


export default Class;

【问题讨论】：

这能回答你的问题吗？ Pass props in Link react-router

通过传递道具是指将路由状态传递给组件吗？有什么问题？

【参考方案1】：

问题

Class 组件不是由Route 组件直接呈现的，因此它不会接收到route props。

<Route path="/Class" >
  <UserProvider>
    <Class/>
  </UserProvider>
</Route>

解决方案

用withRouter 高阶组件包装Class 组件的导出，以便向其中注入路由道具。

export default withRouter(Class);

现在Class 组件应该能够通过location 属性访问路由状态。

const  location:  state   = this.props;

旁注

您无法在排队更新后正确记录反应状态，因为反应状态更新是在在渲染周期之间异步处理的，因此您只会看到当前状态从当前渲染周期开始。

this.setState(
  activeClass: state
);
console.log(this.state.activeClass); // <-- current state!

使用componentDidUpdate 生命周期方法记录状态/属性更新。

【参考方案2】：

<Link 
  to=
   pathname: "/Class",
   state: item.Name
  
   className="ListItem">
   item.Name
</Link>

在导航组件中像这样访问

componentDidMount() 
        const  state  = this.props.location;

        this.setState(
            activeClass: state
        , ()=> 
         this.state.activeClass
       );
      

不要在设置状态后立即控制台状态值，因为它是异步的。如果您希望该控制台检查 do 作为对 setState(..., ()=> console.log('check here') )

的回调

【讨论】：

谢谢，您的回答很有帮助