如何使用 Link(react-router) 将 props 从一个页面传递到 class 组件

Question

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

Link所在的文件：

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

这是 link 指向的文件 (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

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

Don't console state value immediately after setting to the state because it's asynchronous. If you want that console to check do as a callback to setState({...}, ()=> { console.log('check here') })

Answer 2

问题

Class 组件不直接由 Route 组件呈现，因此它不接收 route props.

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

解决方案

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

export default withRouter(Class);

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

const { location: { state } } = this.props;

旁注

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

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

使用 componentDidUpdate 生命周期方法记录 state/prop 更新。

如何使用 Link(react-router) 将 props 从一个页面传递到 class 组件

How to pass props from one page using a Link(react-router) to a class component

reactjs

react-router

react-router-dom

react-component

react-context

问题

解决方案

旁注