javascript - 面对 TypeError:使用 Context API 时渲染不是函数
问题描述
我是 React 的新手,当时正在学习 Context API,在使用它的过程中我遇到了这个错误 TypeError: render is not a function。我还找到了这个答案React Context: TypeError: render is not a function in the platform 这与我的问题很接近但没有结果。这是我正在使用的代码:
import React, { Component } from "react";
import MyContext from "../../Containers/Context/Context";
class Track extends Component {
render() {
return (
<MyContext>
{value => {
return <div>{value.heading}</div>;
}}
</MyContext>
);
}
}
export default Track;
import React, { Component } from "react";
const Context = React.createContext();
export class MyContext extends Component {
state = { track_list: [], heading: "Top Ten Tracks" };
render() {
return (
<Context.Provider value={this.state}>
{this.props.children}
</Context.Provider>
);
}
}
export default MyContext = Context.Consumer;
import React, { Component, Fragment } from "react";
import "./App.css";
import Header from "../src/Components/Header/Header";
import Search from "../src/Components/Search/Search";
import Tracks from "../src/Components/Tracks/Tracks";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import NotFound from "./Components/NotFound/NotFound";
import MyContext from "./Containers/Context/Context";
class App extends Component {
render() {
return (
<MyContext>
<Router>
<Fragment>
<Header />
<div className="container">
<Search />
<Switch>
<Route exact path="/" component={Tracks} />
<Route component={NotFound} />
</Switch>
</div>
</Fragment>
</Router>
</MyContext>
);
}
}
export default App;
解决方案
您的导出和导入语句有问题。
首先是你,export class MyContext
然后你立即MyContext
用Context.Consumer
.
修复您的导出语句,然后修复您的导入。导入Context.Consumer
in 文件Track
,并导入Context.Provider
in 文件App
容器/上下文/Context.js
import React, { Component } from "react";
const Context = React.createContext();
class MyContextProvider extends Component {
state = { track_list: [], heading: "Top Ten Tracks" };
render() {
return (
<Context.Provider value={this.state}>
{this.props.children}
</Context.Provider>
);
}
}
const MyContextConsumer = Context.Consumer;
export {MyContextProvider,MyContextConsumer};
Track.js
import React, { Component } from "react";
import {MyContextConsumer} from "../../Containers/Context/Context";
class Track extends Component {
render() {
return (
<MyContextConsumer>
{value => {
return <div>{value.heading}</div>;
}}
</MyContextConsumer>
);
}
}
export default Track;
应用程序.js
import React, { Component, Fragment } from "react";
import "./App.css";
import Header from "../src/Components/Header/Header";
import Search from "../src/Components/Search/Search";
import Tracks from "../src/Components/Tracks/Tracks";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import NotFound from "./Components/NotFound/NotFound";
import {MyContextProvider} from "./Containers/Context/Context";
class App extends Component {
render() {
return (
<MyContextProvider>
<Router>
<Fragment>
<Header />
<div className="container">
<Search />
<Switch>
<Route exact path="/" component={Tracks} />
<Route component={NotFound} />
</Switch>
</div>
</Fragment>
</Router>
</MyContextProvider>
);
}
}
export default App;
推荐阅读
- regex - 查找并部分替换 Notepad++ 正则表达式
- azure-functions - 持久功能 Blob 触发器
- javascript - 如果填充,更改输入字段颜色
- sql - 过去 6 个月内每个月听超过 10 分钟的人
- javascript - 关于使用 webpack 在 javascript 中的语法
- jsp - Tomcat 9 和 Web 应用程序子目录的类路径问题
- javascript - 节点 Postgres Pub/Sub - 保留剩余的连接槽
- mod-rewrite - mod rewrite 3 个子域重定向到自己(通用重定向)
- c# - 如何使用 HashCode.Combine 避免冲突?
- python - Python - 在 floweaver 中合并包