change to new context api

package.json

@@ -23,8 +23,8 @@
   "dependencies": {
     "@antv/data-set": "^0.8.0",
     "@babel/polyfill": "^7.0.0-beta.36",
-    "@types/react": "^16.3.5",
+    "@types/react": "^16.3.8",
-    "@types/react-dom": "^16.0.4",
+    "@types/react-dom": "^16.0.5",
     "antd": "^3.4.0",
     "babel-runtime": "^6.9.2",
     "bizcharts": "^3.1.3-beta.1",

src/components/PageHeader/index.js

@@ -1,5 +1,4 @@
 import React, { PureComponent, createElement } from 'react';
-import PropTypes from 'prop-types';
 import pathToRegexp from 'path-to-regexp';
 import { Breadcrumb, Tabs } from 'antd';
 import classNames from 'classnames';
@@ -20,12 +19,6 @@ export function getBreadcrumb(breadcrumbNameMap, url) {
 }
 
 export default class PageHeader extends PureComponent {
-  static contextTypes = {
-    routes: PropTypes.array,
-    params: PropTypes.object,
-    location: PropTypes.object,
-    breadcrumbNameMap: PropTypes.object,
-  };
   onChange = key => {
     if (this.props.onTabChange) {
       this.props.onTabChange(key);
@@ -33,10 +26,10 @@ export default class PageHeader extends PureComponent {
   };
   getBreadcrumbProps = () => {
     return {
-      routes: this.props.routes || this.context.routes,
+      routes: this.props.routes,
-      params: this.props.params || this.context.params,
+      params: this.props.params,
-      routerLocation: this.props.location || this.context.location,
+      routerLocation: this.props.location,
-      breadcrumbNameMap: this.props.breadcrumbNameMap || this.context.breadcrumbNameMap,
+      breadcrumbNameMap: this.props.breadcrumbNameMap,
     };
   };
   // Generated according to props

src/layouts/BasicLayout.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Layout } from 'antd';
 import DocumentTitle from 'react-document-title';
 import { connect } from 'dva';
@@ -14,6 +13,7 @@ import Sidebar from '../components/Sidebar';
 import logo from '../assets/logo.svg';
 import Footer from './Footer';
 import Header from './Header';
+import Context from './MeunContext';
 
 const { Content } = Layout;
 const { AuthorizedRoute, check } = Authorized;
@@ -61,11 +61,7 @@ const query = {
 };
 
 class BasicLayout extends React.PureComponent {
-  static childContextTypes = {
+  getContext() {
-    location: PropTypes.object,
-    breadcrumbNameMap: PropTypes.object,
-  };
-  getChildContext() {
     const { location, routerData, menuData } = this.props;
     return {
       location,
@@ -165,10 +161,12 @@ class BasicLayout extends React.PureComponent {
       <DocumentTitle title={this.getPageTitle()}>
         <ContainerQuery query={query}>
           {params => (
-            <div className={classNames(params)}>
+            <Context.Provider value={this.getContext()}>
-              {layout}
+              <div className={classNames(params)}>
-              <RightSidebar onChange={this.changeSetting} />
+                {layout}
-            </div>
+                <RightSidebar onChange={this.changeSetting} />
+              </div>
+            </Context.Provider>
           )}
         </ContainerQuery>
       </DocumentTitle>

src/layouts/MeunContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export default createContext();

src/layouts/PageHeaderLayout.js

@@ -3,11 +3,16 @@ import { Link } from 'dva/router';
 import PageHeader from '../components/PageHeader';
 import GridContent from './GridContent';
 import styles from './PageHeaderLayout.less';
+import MeunContext from './MeunContext';
 
 export default ({ children, wrapperClassName, top, ...restProps }) => (
   <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
     {top}
-    <PageHeader key="pageheader" {...restProps} linkElement={Link} />
+    <MeunContext.Consumer>
+      {value => {
+        return <PageHeader {...value} key="pageheader" {...restProps} linkElement={Link} />;
+      }}
+    </MeunContext.Consumer>
     {children ? (
       <div className={styles.content}>
         <GridContent>{children}</GridContent>