ReactJs 上下文 - 元素类型无效

Question

我正在尝试使用新的 ReactJs Context 作为 Redux 的替代品，但是我收到了一个错误。

Invariant Violation：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

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>
        )
    }
}

这里是提供者被消费的地方

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>;
    }
}

任何帮助将不胜感激。

Answer 1

让我提供另一个答案。这类似于@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"));

Answer 2

您应该使用 {this.state} 作为 Provider 的值，而不是 "{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>
    );
  }
}