javascript - 尝试使用 Context API 时看到“渲染不是函数”
问题描述
我正在尝试学习 Context API,我想要实现的是在我的标题中显示登录用户,以及根据登录状态操作我的菜单选项(将“isAuthenticated”存储在状态?)
我的上下文类:
import React from 'react';
const Context = React.createContext();
export class Provider extends React.Component {
state = {
isAuthenticated: true,
user: {
name: "Joe Smith",
email: "joe.smith@here.com"
}
}
render() {
return (
<Context.Provider value={this.state}>
{this.props.children}
</Context.Provider>
)
}
}
export const Consumer = Context.Consumer;
所以,非常基础。设置一个状态,稍后在一些子组件中,我想显示 chaps 名称。
我的 App.js 是使用“提供者”,因此我的所有组件都可以访问这些数据:
import React from 'react';
import { HashRouter , Route, Switch } from 'react-router-dom';
import Home from './components/home';
import Header from './components/header';
import Accounts from './components/accounts';
import Reports from './components/reports';
import Login from './components/login';
import {Container} from 'reactstrap';
import { Provider } from './context';
function App() {
return (
<div className="App">
<Provider>
<HashRouter>
<Header />
<Container>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/accounts" component={Accounts} />
<Route exact path="/reports" component={Reports} />
<Route exact path="/login" component={Login} />
</Switch>
</Container>
</HashRouter>
</Provider>
</div>
);
}
export default App;
所以在这种情况下,“标题”需要访问我的上下文。我的标题将显示一个菜单(根据我将添加到上下文中的一些信息,将显示或隐藏选项、登录按钮等)。
在菜单下,我想显示一个小的信息栏。例如,登录用户名。所以,我的头类看起来像这样:
import React from 'react';
import Menu from './menu';
import InfoBar from './infobar';
import { Consumer } from '../context';
class Header extends React.Component {
render() {
const menuStyle = {
paddingBottom: "5px"
}
return(
<Consumer>
<div style={menuStyle}>
{value => {
console.log(value);
return (
<h1>Test</h1>
)
}}
<Menu />
<InfoBar />
</div>
</Consumer>
)
}
}
export default Header;
但问题现在发生了。当我运行我的代码时,它会编译并运行,但马上就会出现运行时错误:
TypeError: render is not a function updateContextConsumer C:/Storage/Scratch/ReactApp/accufinance/node_modules/react-dom/cjs/react-dom.development.js:16082
我读了一些关于退货和多个孩子的东西,但我的代码似乎没有这个问题。任何有助于理解问题和问题发生的地方都会很棒。如果我注释掉'header'中的代码,没有错误......但是......也没有屏幕。它似乎正在该地区发生。
解决方案
上下文消费者使用一个渲染道具,特别是一个函数作为子组件,因此它期望它的直接子是一个函数(而不是一个组件)。在您的情况下,您只需在函数内移动 div :
<Consumer>
{value => {
console.log(value);
return (
<div style={menuStyle}>
<h1>Test</h1>
<Menu />
<InfoBar />
</div>
)
}}
</Consumer>
当您想将组件的内部状态公开给其子级时,渲染道具非常强大,但当您还想将它与不同类型的子级一起使用时。
模式是这样的:
class Parent extends Component {
state = { name: 'Mike' }
handleChange = (e) => this.setState({ name: e.target.value })
render() {
// Here's the main difference: We expect `children` to be
// a function, and we pass name in as the argument
return children(state.name);
}
}
const InputChild = props => <input value={props.name} />
const HeaderChild = props => <h1>{props.name}</h1>
const App = () => {
return (
<Parent>
{name => {
// We could easily swap in `HeaderChild` here (or
// anything else!), passing `Parent`'s internal
// state.name to it instead:
<InputChild name={name} />
}
</Parent>
)
}
这就是 Context 工作的原因,因为 Consumer 对其子组件中的组件一无所知,但它可以公开其状态(这是来自 Provider 的值)。
React 文档有一个关于渲染道具的精彩部分:https ://reactjs.org/docs/render-props.html
推荐阅读
- c++ - Windows上的libtool需要绝对路径,当我已经给它一个绝对路径时
- javascript - 计算电子表格单元格的循环
- swift - 如何将 16 个字节从数据复制到 uuid_t?
- python - 切换到 64 位时出现 Python Winerror 193
- javascript - SyntaxError:输入 Discord Bot 意外结束
- java - 使用 Jsoup 非递归提取文本
- javascript - 如何在firebase登录或登录中设置或添加自定义提供程序名称,例如linkedin、instagram?
- c# - ScrapySharp 表单提交导致 System.AggregateException
- c# - 为什么将数据导出到 Excel 时日期格式会发生变化?
- python-3.x - Python中的闭包 - 执行内部函数?