Javascript 反应上下文不起作用

我已经使用

createreact-app

生成了一个项目

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import AuthProvider from './AuthProvider';

ReactDOM.render(
  <AuthProvider>
    <App />
  </AuthProvider>,
  document.getElementById('root')
);
registerServiceWorker();

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
从“/AuthProvider”导入AuthProvider；
ReactDOM.render(
,
document.getElementById（'root'））
);
registerServiceWorker（）；

AuthProvider.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class AuthProvider extends Component {

  childContextTypes = {
    test: PropTypes.string
  };

  getChildContext() {
    return {
      test: "Hello World!"
    }
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
导出默认类AuthProvider扩展组件{
childContextTypes={
测试：PropTypes.string
};
getChildContext（）{
返回{
测试：“你好，世界！”
}
}
render（）{
返回(
{this.props.children}
)
}
}

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          AuthProvider test: {this.context.test} // NOT WORKING
        </p>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
类应用程序扩展组件{
render（）{
返回(
欢迎反应

AuthProvider测试：{this.context.test}//不工作

);
}
}
导出默认应用程序；

---

但是在

App.js

中调用

{this.context.test}

似乎不起作用。我也没有收到错误，所以我有点不知所措。

似乎

App

缺少

contextTypes

声明

试一试

---

似乎

App

缺少

contextTypes

声明

试一试

---

您需要为子对象定义contextTypes才能访问它

根据报告：

如果未定义

contextTypes

，则

context

将是空对象

类应用程序扩展组件{
render（）{
返回(
欢迎反应

AuthProvider测试：{this.context.test}

);
}
}
App.contextTypes={
测试：PropTypes.string
}

您需要为子级定义contextTypes才能访问它

根据报告：

如果未定义

contextTypes

，则

context

将是空对象

类应用程序扩展组件{
render（）{
返回(
欢迎反应

AuthProvider测试：{this.context.test}

);
}
}
App.contextTypes={
测试：PropTypes.string
}

如何避免为子组件定义ContextType？高阶组件@TIWAZ89如何避免为子组件定义contextTypes？高阶组件@蒂瓦兹89

import PropTypes from 'prop-types'

App.contextTypes = {
  test: PropTypes.string
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          AuthProvider test: {this.context.test} 
        </p>
      </div>
    );
  }
}

App.contextTypes = {
   test: PropTypes.string
}