反应上下文 - 'contextType' 未定义答案

【问题标题】：React context - 'contextType' is not defined反应上下文 - 'contextType' 未定义
【发布时间】：2019-05-24 05:58:42
【问题描述】：

我正在使用 react-dom@16.6.1 和 react@16.6.1 应该支持 react Context 并尝试运行一个与 react-context 相同的简单示例：

app.js

import React, { Component } from 'react';
import AppManger from './components/AppManger';
import './App.css';
export const ThemeContext = React.createContext({a1:'a1'});

class App extends Component {

  render() {

    return (

      <div className="App">
        <h1>Manage Storefront Services Products</h1>
        <ThemeContext.Provider value="dark">
          <AppManger />
        </ThemeContext.Provider>

      </div>

    );
  }
}

export default App;

AppManger.js（没有上下文引用）

import React, { Component } from 'react'
import SearchBar from './SearchBar';
export default class AppManger extends Component {


    constructor(props) {
        super(props);
        this.onSearchBarChange = this.onSearchBarChange.bind(this);
        this.state = {
            searchValue: '',
            errorLoading: false,
            errorObj: null,
        }
    }

    onSearchBarChange(e) {
        e.persist();
        this.setState({ searchValue: e.target.value });
    }

    render() {
        return (

            <div>
                <a href="/subsadmin/saml/logout">Log out</a>
                <SearchBar onSearchBarChange={this.onSearchBarChange} inAttrView={this.state.onAttrPage} />
            </div>

        )
    }
}

还有我想在其中使用 Context 的 SearchBar.js：

import React, { Component } from 'react';
import ThemeContext from '../App';


export default class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
      showAttrModal: false
    };

  };


  componentDidMount(){
    console.log(this.context); //{}
  }

  render() {
    const contextType = ThemeContext;
    console.log(contextType); //{}
    return (

      <div>
        {contextType} /*'contextType' is not defined  no-undef */
        <input type="text" style={searchBoxStyle} className="form-control" onChange={this.props.onSearchBarChange} placeholder="Search for..." id="sku" name="sku" />

      </div>

    )
  }
}

如果我运行应用程序，我会在 SearchBar.js 中得到Line 44: 'contextType' is not defined no-undef，如果我删除此行，我会在记录this.context 时得到{}。

【问题讨论】：

我猜应该是const contextType = ThemeContext
是的，但它仍然显示 {} 而不是实际值。
你的ThemeContext是一个组件还是一个值？
在 App.js 中定义为 -export const ThemeContext = React.createContext({a1:'a1'}); 的值
请试试这个import { ThemeContext } from '../App'

标签： javascript reactjs react-context

【解决方案1】：

您没有正确使用上下文，因为您需要将其定义为类的静态属性并将其导入为命名导入，因为您已将其导出为命名导入

import { ThemeContext } from '../App';

export default class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
      showAttrModal: false
    };

  };

  static contextType = ThemeContext;
  componentDidMount(){
    console.log(this.context); //{}
  }

  render() {

    console.log(this.contextType); //{}
    return (

      <div>
        {contextType} /*'contextType' is not defined  no-undef */
        <input type="text" style={searchBoxStyle} className="form-control" onChange={this.props.onSearchBarChange} placeholder="Search for..." id="sku" name="sku" />

      </div>

    )
  }
}

【讨论】：

有效，但要访问我记录的上下文ThemeContext。谢谢。
您可以使用 ThemeContext 但由于某种原因，如果您在 Provider 和 Consumer 之间有一个 PureComponent ，那么我猜在上下文更改时不会触发重新渲染

【解决方案2】：

您导入了 App 而不是 ThemeContext。

使用import { ThemeContext } from '../App.js；

【讨论】：

还是一样的结果{}.
你是static contextType = ThemeContext; 吗？

【解决方案3】：

这里的问题：

componentDidMount() {
    console.log(this.context);
}

这里找不到this.context变量。

static contextType = 

To

const contextType =

【讨论】：