[英]Using React Hooks for Data Provider and Data Context
我目前正在修改我的DataProvider
,使用 React Hooks 将它从一个类组件更新为一个功能组件。
我相信我的问题在于我设置上下文使用者的方式,但我还没有找到测试这个的好方法。
数据提供者.js
import React, { createContext } from "react";
const DataContext = createContext();
export const DataProvider = (props) => {
const [test, setTest] = React.useState("Hello");
return (
<DataContext.Provider value={test}>{props.children}</DataContext.Provider>
);
};
export const withContext = (Component) => {
return function DataContextComponent(props) {
return (
<DataContext.Consumer>
{(globalState) => <Component {...globalState} {...props} />}
</DataContext.Consumer>
);
};
};
所以我的withContext
函数应该接收一个组件并将上下文提供者的道具传递给它。
我尝试将我的测试状态拉入组件中。
import React from "react";
import style from "./DesktopAboutUs.module.css";
import { withContext } from "../../DataProvider";
const DesktopAboutUs = ({ test }) => {
return (
<div className={style.app}>
<div>{test}</div>
</div>
);
};
export default withContext(DesktopAboutUs);
没有数据显示为test
。 对我来说,这表明我的withContext
函数没有正确地从Provider
接收道具。
因为您传递了value={test}
, globalState
是一个字符串,而不是具有test
属性的对象。
这些解决方案中的任何一个都会产生您期望的结果:
value
的丙DataContext.Provider
使用value={{ test }}
而不是value={test}
如果打算globalState
包含多个道具。globalState
到test
的支柱Component
使用test={globalState}
代替{...globalState}
如果你不打算globalState
含有多种道具。 const DataContext = React.createContext(); const DataProvider = (props) => { const [test, setTest] = React.useState("Hello"); return ( <DataContext.Provider value={{ test }}> {props.children} </DataContext.Provider> ); }; const withContext = (Component) => (props) => ( <DataContext.Consumer> {(globalState) => <Component {...globalState} {...props} />} </DataContext.Consumer> ); const DesktopAboutUs = ({ test }) => ( <div>{test}</div> ); const DesktopAboutUsWithContext = withContext(DesktopAboutUs); ReactDOM.render( <DataProvider> <DesktopAboutUsWithContext /> </DataProvider>, document.querySelector('main') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script> <main></main>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.