所以我试图学习它,我的目标是,我有一个Navbar,我想在我的上下文中回应一个状态,{isAuthorised：false}.
我跟随this guys video：
我所做的是创建了一个名为“context”的文件夹,并在其中创建了一个名为provider.jsx的jsx.
import React,{Component} from 'react';
export default class MyProvider extends Component {
constructor(props) {
super(props);
this.state = {
isAuthenticated: false
}
}
render() {
const MyContext = React.createContext();
return(
<MyContext.Provider value="Test Text">
{this.props.children}
</MyContext.Provider>
)
}
}
https://github.com/CraigInBrisbane/ReactLearning/blob/master/src/context/provider.jsx
在那里,我在渲染中创建了上下文(这可能是错的……也许这意味着在我的App jsx中发生？).
我在那里创建了一个状态,默认是被认为是假的. (我稍后会添加代码以将其设置为应该是什么).
这编译…并运行.
在我的App组件中,我使用我的提供程序,如下所示：
import MyProvider from './context/provider.jsx';
export default class App extends Component {
render() {
return (
<MyProvider>
<div>
<Router>
<div>
<Navbar />
<Route exact path='/' component={Home} />
<Route path='/about' component={About} />
https://github.com/CraigInBrisbane/ReactLearning/blob/master/src/app.jsx
所以我用MyProvider包装所有代码.
在我的Navbar组件中,我导入了我的提供程序：
import MyProvider from '../../context/provider.jsx';
然后我尝试在我的渲染中从我的提供者输出somethign：
return (
<div>
<MyProvider.Consumer>
{(context)=> (
<p>Here I am {context}</p>
)}
</MyProvider.Consumer>
<nav className="navbar navbar-expand">
https://github.com/CraigInBrisbane/ReactLearning/blob/master/src/components/navbar/navbar.jsx
但这对我来说非常糟糕.
Warning: React.createElement: type is invalid — expected a string
(for built-in components) or a class/function (for composite
components) but got: undefined. You likely forgot to export your
component from the file it’s defined in,or you might have mixed up
default and named imports.Check the render method of
Navbar.
in Navbar (created by App)
in div (created by App)
和
Uncaught Error: Element type is invalid: expected a string (for
built-in components) or a class/function (for composite components)
but got: undefined. You likely forgot to export your component from
the file it’s defined in,or you might have mixed up default and named
imports.
我怎样才能让它发挥作用？我的.createContext应该驻留在哪里？
解决方法
console.log(MyProvider.Consumer); // undefined
Consumer仅作为静态属性存在于MyContext组件中.
你需要改变什么：
provider.jsx
import React,{Component} from 'react';
export const MyContext = React.createContext();
export default class MyProvider extends Component {
constructor(props) {
super(props);
this.state = {
isAuthenticated: false
}
}
render() {
return(
<MyContext.Provider value={this.state.isAuthenticated}>
{this.props.children}
</MyContext.Provider>
)
}
}
然后在navbar.jsx中
import MyProvider,{ MyContext } from '../../context/provider.jsx';
<MyProvider>
<MyContext.Consumer>
{(context)=> (
<p>Here I am {context}</p>
)}
</MyContext.Consumer>
</MyProvider>
编辑：
要让MyProvider中存在Consumer,您必须在其上分配指向MyContext Consumer的静态变量
MyProvider.Consumer = MyContext.Consumer;
然后我认为你可以使用它：
<MyProvider>
<MyProvider.Consumer>
{(context)=> (
<p>Here I am {context}</p>
)}
</MyProvider.Consumer>
</MyProvider>
但是我不确定这是不是一个好主意.
