reactjs - React Context消费者找不到道具

Question

我正在尝试使用 React Context API 来传递道具，但是出现“未定义”错误。react的版本是16.3.2，react-dom的版本是16.3.2。以下是我的代码：

提供者.jsx：

import React from 'react';

export const PathContext = React.createContext({
  rootPath: "http://localhost/example"
});

应用程序.jsx：

import React from 'react';
import {PathContext} from './Provider.jsx';

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

  render() {
    return(
      <div>
        <PathContext.Provider>
          <AppRootPath />
        </PathContext.Provider>
      </div>
    )
  }
}

class AppRootPath extends React.Component {
  render() {
    return(
      <div>
        <span>App Root Path</span><br />
        <PathContext.Consumer>
          {
            ({rootPath}) => <span>{rootPath}</span>
          }
        </PathContext.Consumer>
      </div>
    )
  }
}
export default App;

我在这里找不到任何问题，但是控制台报告此错误：TypeError: Cannot read property 'rootPath' of undefined，并且错误发生在这里：({rootPath}) => <span>{rootPath}</span>

Answer 1

关于使用默认值：

如果上述上下文没有提供者，则 value 参数将等于传递给 createContext() 的 defaultValue。

但是你用 Provider 包装它。尝试删除提供者：

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

  render() {
    return(
      <div>
        <AppRootPath />
      </div>
    )
  }
}

class AppRootPath extends React.Component {
  render() {
    return(
      <div>
        <span>App Root Path</span><br />
        <PathContext.Consumer>
          {
            ({rootPath}) => <span>{rootPath}</span>
          }
        </PathContext.Consumer>
      </div>
    )
  }
}