Question

React docs有以下示例（https://reactjs.org/docs/context.html#parent-child-coupling）：

Context也可以让你在父母和孩子的地方建立一个API 通信。例如，一个以这种方式工作的库是React 路由器V4：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </Router>
);

但实际的例子在哪里？该代码中的哪一段显示了使用context？

的示例

Answer 1

这是Router组件。您可以看到代码here。特别是

getChildContext() {
  return {
    router: {
      ...this.context.router,
      history: this.props.history,
      route: {
        location: this.props.history.location,
        match: this.state.match
      }
    }
  };
}

{child}传递到树下的render方法

render() {
  const { children } = this.props;
  return children ? React.Children.only(children) : null;
}

反应文档上下文示例

1 个答案: