加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – 为什么我的context.router在我的react组件中未定义?

发布时间:2020-12-15 20:45:52 所属栏目:百科 来源:网络整理
导读:我试图从我的组件内访问我的路由器,它是未定义的.这是我的路由器: React.render( Provider store={store} {() = Router Route path="/" component={LoginContainer} / /Router } /Provider,document.getElementById('app')); 这是容器: class LoginContain
我试图从我的组件内访问我的路由器,它是未定义的.这是我的路由器:
React.render(
    <Provider store={store}>
        {() =>
            <Router>
                <Route path="/" component={LoginContainer} />
            </Router>
        }
    </Provider>,document.getElementById('app')
);

这是容器:

class LoginContainer extends React.Component {
  constructor() {
    super();
  }

  static propTypes = {
    handleLogin: PropTypes.func.isRequired
  }

  static contextTypes = {
    router: React.PropTypes.object
  }

  handleLogin() {
    this.props.dispatch(Actions.login(null,null,this.context.router));
  }

  render() {
    return (
      <Login
        auth={this.props}
        handleLogin={this.handleLogin}
       />
    );
  }
}

function mapStateToProps(state) {
  return {
    stuff: []
  }
}


export default connect(mapStateToProps)(LoginContainer);

最后组件:

import React,{ PropTypes } from 'react';

class Login extends React.Component {
    static propType = {
        handleLogin: PropTypes.func.isRequired
    }
    static contextTypes = {
        router: React.PropTypes.object
    }
    render() {
        return (    
            <div className="flex-container-center">
                <form>
                    <div className="form-group">
                        <button type="button" onClick={this.props.handleLogin}>Log in</button>
                    </div>
                </form>
            </div>
        );
    }
}

module.exports = Login;

当我点击登录按钮时,它会点击容器中的handleLogin.在我的handleLogin中,我的这个值是未定义的.我试图将它绑定到构造函数中的函数,但它仍然是未定义的.

另外,当我在我的渲染函数中放置一个断点时,我有一个this.context.router,但它是未定义的.如何在我的handleLogin中获得正确的结果以及如何确保我的路由器在上下文中并且未定义?

跟上变化的最佳方法是浏览 Releases页面.

在>的React Router版本中. 1.0.0-beta3和< 2.0.0-rc2,没有context.router.相反,你需要寻找context.history. 如果您使用版本< = 1.0.0-beta3或> = 2.0.0-rc2,那么context.router就在那里.简而言之,发生的事情是它被删除而有利于历史,但后来维护人员决定最好隐藏路由器后面的历史库API,因此他们将在2.0 RC2及以后的路由器上下文.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读