如何使用React.createContext()与反应路由器?

时间:2018-04-30 16:19:09

标签: reactjs react-router-v4 react-context

我正在尝试使用React.createContext()与反应路由器,但目前是不可能的。

MyClass deserialized = Gson().fromJson(jsonStr, MyClass.class);

我总是收到此错误

未捕获错误:元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:object。

有人能帮助我吗?

1 个答案:

答案 0 :(得分:1)

这似乎是渲染上下文值的问题,以下代码效果很好

index.js

import React from "react";
import { render } from "react-dom";
import { HashRouter, Switch, Route } from "react-router-dom";
import Hello from "./Hello";
import { Context } from "./context";
const App = () => (
  <Context.Provider value={{ valueTest: 1 }}>
    <HashRouter>
      <Switch>
        <Route
          exact
          path="/"
          render={props => <Hello {...props} name="CodeSandbox" />}
        />
      </Switch>
    </HashRouter>
  </Context.Provider>
);

render(<App />, document.getElementById("root"));

context.js

import React from "react";
export const Context = React.createContext();

Hello.js

import React from "react";
import { Context } from "./context";

export default ({ name }) => (
  <Context.Consumer>
    {value => (
      <h1>
        Hello {name} {value.valueTest}!
      </h1>
    )}
  </Context.Consumer>
);

<强> Working codesandbox