ReactJs 上下文 - 元素类型无效
ReactJs context - Element type is invalid
我正在尝试使用新的 ReactJs Context 作为 Redux 的替代品,但是我收到了一个错误。
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
https://reactjs.org/docs/context.html
这是我包装在 MyProvider 标签中的布局代码
import React, { Component } from "react";
import { NavMenu } from "./NavMenu";
import { MyProvider } from "../contexts/context";
export class Layout extends Component {
render() {
return (
<MyProvider>
<div className="container-fluid">
<div className="row">
<div className="col-sm-3">
<NavMenu />
</div>
<div className="col-sm-9">
{this.props.children}
</div>
</div>
</div>
</MyProvider>
);
}
}
这是我导入的上下文代码
import React, { Component } from "react";
export const MyContext = React.createContext();
export class MyProvider extends Component {
state = {
name: 'test name'
}
render() {
return (
<MyContext.Provider value="{this.state}">
{this.props.children}
</MyContext.Provider>
)
}
}
这里是provider被消费的地方
import React, { Component } from "react";
import { RouteComponentProps } from "react-router";
import { MyProvider } from "../contexts/context";
export class Counter extends Component {
render() {
return <div className="m-2">
<MyContext.Consumer>
{(c) => (<p>My name is {c.state.name}</p>)}
</MyContext.Consumer>
</div>;
}
}
如有任何帮助,我们将不胜感激。
您应该使用 {this.state}
作为提供者的值,而不是 "{this.state}"
export const MyContext = React.createContext();
export class MyProvider extends Component {
state = {
name: "test name"
};
render() {
return (
<MyContext.Provider value={this.state}>
{this.props.children}
</MyContext.Provider>
);
}
}
您还必须使用 MyContext.Consumer
组件才能使用来自提供商的 value
,并且该组件将一个函数作为子组件。
import { MyProvider, MyContext } from "../contexts/context";
export class Layout extends Component {
render() {
return (
<MyProvider>
<MyContext.Consumer>
{value => (
<div className="container-fluid">
<div className="row">
<div className="col-sm-3">
<NavMenu />
</div>
<div className="col-sm-9">{this.props.children}</div>
</div>
</div>
)}
</MyContext.Consumer>
</MyProvider>
);
}
}
让我提供另一个答案。这与@Tholle 的类似,但我认为它更接近您的意图。如果没有,请将其视为一个简单的替代方案。
const MyContext = React.createContext()
class MyProvider extends React.Component {
state = {
name: 'test name'
}
render() {
return (
<MyContext.Provider value={this.state}>
{this.props.children}
</MyContext.Provider>
)
}
}
class Layout extends React.Component {
render() {
return (
<MyProvider>
<div className="container-fluid">
<div className="row">
<div className="col-sm-3">
<NavMenu />
</div>
<div className="col-sm-9">
{this.props.children}
</div>
</div>
</div>
</MyProvider>
);
}
}
class Counter extends React.Component {
render() {
return <div className="m-2">
<MyContext.Consumer>
{c => <p>My name is {c.name}</p>}
</MyContext.Consumer>
</div>;
}
}
ReactDOM.render(<Layout><Counter /></Layout>, document.getElementById("root"));
我正在尝试使用新的 ReactJs Context 作为 Redux 的替代品,但是我收到了一个错误。
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
https://reactjs.org/docs/context.html
这是我包装在 MyProvider 标签中的布局代码
import React, { Component } from "react";
import { NavMenu } from "./NavMenu";
import { MyProvider } from "../contexts/context";
export class Layout extends Component {
render() {
return (
<MyProvider>
<div className="container-fluid">
<div className="row">
<div className="col-sm-3">
<NavMenu />
</div>
<div className="col-sm-9">
{this.props.children}
</div>
</div>
</div>
</MyProvider>
);
}
}
这是我导入的上下文代码
import React, { Component } from "react";
export const MyContext = React.createContext();
export class MyProvider extends Component {
state = {
name: 'test name'
}
render() {
return (
<MyContext.Provider value="{this.state}">
{this.props.children}
</MyContext.Provider>
)
}
}
这里是provider被消费的地方
import React, { Component } from "react";
import { RouteComponentProps } from "react-router";
import { MyProvider } from "../contexts/context";
export class Counter extends Component {
render() {
return <div className="m-2">
<MyContext.Consumer>
{(c) => (<p>My name is {c.state.name}</p>)}
</MyContext.Consumer>
</div>;
}
}
如有任何帮助,我们将不胜感激。
您应该使用 {this.state}
作为提供者的值,而不是 "{this.state}"
export const MyContext = React.createContext();
export class MyProvider extends Component {
state = {
name: "test name"
};
render() {
return (
<MyContext.Provider value={this.state}>
{this.props.children}
</MyContext.Provider>
);
}
}
您还必须使用 MyContext.Consumer
组件才能使用来自提供商的 value
,并且该组件将一个函数作为子组件。
import { MyProvider, MyContext } from "../contexts/context";
export class Layout extends Component {
render() {
return (
<MyProvider>
<MyContext.Consumer>
{value => (
<div className="container-fluid">
<div className="row">
<div className="col-sm-3">
<NavMenu />
</div>
<div className="col-sm-9">{this.props.children}</div>
</div>
</div>
)}
</MyContext.Consumer>
</MyProvider>
);
}
}
让我提供另一个答案。这与@Tholle 的类似,但我认为它更接近您的意图。如果没有,请将其视为一个简单的替代方案。
const MyContext = React.createContext()
class MyProvider extends React.Component {
state = {
name: 'test name'
}
render() {
return (
<MyContext.Provider value={this.state}>
{this.props.children}
</MyContext.Provider>
)
}
}
class Layout extends React.Component {
render() {
return (
<MyProvider>
<div className="container-fluid">
<div className="row">
<div className="col-sm-3">
<NavMenu />
</div>
<div className="col-sm-9">
{this.props.children}
</div>
</div>
</div>
</MyProvider>
);
}
}
class Counter extends React.Component {
render() {
return <div className="m-2">
<MyContext.Consumer>
{c => <p>My name is {c.name}</p>}
</MyContext.Consumer>
</div>;
}
}
ReactDOM.render(<Layout><Counter /></Layout>, document.getElementById("root"));