如何解决在离子反应中的两个选项卡之间共享数据
我有 App.tsx,它是应用程序根目录,然后是两个选项卡 tab1.tsx 和 tab2.tsx。
tab1.tsx 有一个变量声明为
const [coins,setCoins] = useState(0)
和 tab2.tsx 我也声明相同
const [coins,setCoins] = useState(0)
但这只是目前的一种解决方法。我如何让它在一个地方声明它能够在两个选项卡之间共享它。我不认为将它作为参数在选项卡之间传递是一个好的解决方案。
在 ionic angular 中,我使用了一项服务来处理此类变量,然后在整个应用程序中轻松引用。离子反应的解决方案是什么?
解决方法
使用 useContext
React Hook。
https://reactjs.org/docs/hooks-reference.html#usecontext
1- 在项目中新建一个文件,比如 my-context.tsx
import React,{ createContext,useState } from "react";
//create the context
export const MyContext = createContext<any>(undefined);
export const MyProvider: React.FC = ({ children }) => {
const [coins,setCoins] = useState(0)
let state = {
coins,setCoins
};
//wrap the application in the provider
return <MyContext.Provider value={state}>{children}</MyContext.Provider>;
};
export default MyContext;
2- 像这样将 App.tsx 包裹在 <AuthProvider> </AuthProvider>
中:
const App: React.FC = () => {
return (
<IonApp>
<AuthProvider>
<IonReactRouter>
...
</IonReactRouter>
</AuthProvider>
</IonApp>
);
};
export default App;
3- 每次您想在其他组件/页面中使用此状态时,请导入上下文并像这样使用它:
const {
coins,setCoins
} = React.useContext(MyContext);
通过这种方式,您可以在整个应用中共享状态并设置状态。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。