反应上下文 - 'contextType' 未定义
[英] React context - 'contextType' is not defined
本文介绍了反应上下文 - 'contextType' 未定义的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用应该支持 react Context
的 react-dom@16.6.1 和 react@16.6.1 并尝试运行一个与 反应上下文:
app.js
import React, { Component } from 'react';从 './components/AppManger' 导入 AppManger;导入'./App.css';export const ThemeContext = React.createContext({a1:'a1'});类 App 扩展组件 {使成为() {返回 (<div className="应用程序"><h1>管理店面服务产品</h1><ThemeContext.Provider value="dark"><应用管理器/></ThemeContext.Provider>
);}}导出默认应用程序;
AppManger.js(没有上下文引用)
import React, { Component } from 'react'从 './SearchBar' 导入 SearchBar;导出默认类 AppManger 扩展组件 {构造函数(道具){超级(道具);this.onSearchBarChange = this.onSearchBarChange.bind(this);this.state = {搜索值:'',错误加载:假,错误对象:空,}}onSearchBarChange(e) {e.persist();this.setState({ searchValue: e.target.value });}使成为() {返回 (<div><a href="/subsadmin/saml/logout">注销</a><SearchBar onSearchBarChange={this.onSearchBarChange} inAttrView={this.state.onAttrPage}/>
)}}
还有我想在其中使用上下文的 SearchBar.js:
import React, { Component } from 'react';从../App"导入 ThemeContext;导出默认类 SearchBar 扩展组件 {构造函数(道具){超级(道具);this.state = {showModal: 假,showAttrModal: 假};};componentDidMount(){控制台日志(this.context);//{}}使成为() {const contextType = ThemeContext;控制台日志(上下文类型);//{}返回 (<div>{contextType}/*'contextType' 未定义 no-undef */<input type="text" style={searchBoxStyle} className="form-control" onChange={this.props.onSearchBarChange} placeholder="搜索..." id="sku" name="sku"/>
)}}
如果我运行应用程序,我会在 SearchBar.js 中得到 Line 44: 'contextType' is not defined no-undef
如果我删除此行,我会在以下情况下得到 {}
我记录了 this.context
.
解决方案
您没有正确使用上下文,因为您需要将其定义为类的静态属性并将其导入为命名导入,因为您已将其导出作为命名导入
import { ThemeContext } from '../App';导出默认类 SearchBar 扩展组件 {构造函数(道具){超级(道具);this.state = {showModal: 假,showAttrModal: 假};};静态 contextType = ThemeContext;componentDidMount(){控制台日志(this.context);//{}}使成为() {console.log(this.contextType);//{}返回 (<div>{contextType}/*'contextType' 未定义 no-undef */<input type="text" style={searchBoxStyle} className="form-control" onChange={this.props.onSearchBarChange} placeholder="搜索..." id="sku" name="sku"/>
)}}
I am using react-dom@16.6.1 and react@16.6.1 that should support react Context
and trying to run a simple example same as the 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(has no context reference)
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>
)
}
}
And the SearchBar.js where I want to use Context:
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>
)
}
}
If I run the app I get Line 44: 'contextType' is not defined no-undef
in SearchBar.js if I remove this line I get {}
when I logging the this.context
.
解决方案
You aren't correctly using context, as you need to define it as a static property of the class and import it as a named import since you have exported it as a named import
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>
)
}
}
这篇关于反应上下文 - 'contextType' 未定义的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!