Question

我在看redux-blog-example。有SignupRoute.js看起来像这样：

@connect(state => ({
  auth: state.auth
}), {
  signup
})
export default class SignupRoute extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object
  }

  handleSubmit = (email, password) => {
    const router = this.context.router;

    this.props.signup(email, password, router);
  }

  render() {
    return (
        <Signup
          auth={this.props}
          handleSubmit={this.handleSubmit}
        />
    );
  }
}

router如何连接至context的{{1}}？

Answer 1

它使用context，这是一个未记录但反复广泛实现的React功能。如需完整的低位，请参阅this article，但这是其中的要点：

let router = Router(); // just illustrating, this is not how you instantiate React router

class MyComponent extends React.Component {
    static contextTypes = {
        router: React.PropTypes.object
    };

    render(){
        // By declaring context type here, and childContextTypes
        // on the parent along with a function with how to get it,
        // React will traverse up and look for the `router` context.
        // It will then inject it into `this.context`, making it 
        // available here.
    }
}

class Parent extends React.Component {
    static childContextTypes = {
        router: React.PropTypes.object
    };

    getChildContext(){
      return {
        router: this.props.router
      };
    }

    render(){
        return <MyComponent />;
    }
}

ReactDOM.render(<Parent router={router} />, document.getElementById('app'));

React Router如何进入React上下文？

1 个答案: