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

Question

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

链接所在的文件：

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

Answer 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 生命周期方法记录状态/属性更新。

Answer 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') })

的回调