当前位置: 首页> 游戏> 单机 > react如何使用useContext + TS 自定义hooks

react如何使用useContext + TS 自定义hooks

时间:2025/7/11 17:36:55来源:https://blog.csdn.net/m0_62323931/article/details/140937296 浏览次数:0次

为了在 TypeScript 中为 useContext 提供良好的类型提示,我们需要为 Context 定义类型,并确保在创建和使用 Context 时应用这些类型。这可以帮助我们获得更好的类型检查和智能提示。

示例:在用户认证示例中添加 TypeScript 类型

  1. 定义类型

首先,定义与 Context 相关的数据结构和类型。


// 定义用户和认证状态的类型
interface User {username: string;
}interface AuthContextType {user: User | null;login: (username: string) => void;logout: () => void;
}
  1. 创建 Context 并提供值

在创建和使用 Context 时应用这些类型。


import React, { createContext, useContext, useState, ReactNode } from 'react';// 创建 Context,初始值为 undefined
const AuthContext = createContext<AuthContextType | undefined>(undefined);interface AuthProviderProps {children: ReactNode;
}export function AuthProvider({ children }: AuthProviderProps) {const [user, setUser] = useState<User | null>(null);const login = (username: string) => {setUser({ username });};const logout = () => {setUser(null);};// 提供的值包含用户状态和登录、登出函数const value = {user,login,logout,};return (<AuthContext.Provider value={value}>{children}</AuthContext.Provider>);
}export function useAuth() {const context = useContext(AuthContext);if (context === undefined) {throw new Error('useAuth must be used within an AuthProvider');}return context;
}
  1. 在组件中使用 Context

当我们在组件中使用 useAuth 时,TypeScript 将提供准确的类型提示。


import React from 'react';
import { useAuth, AuthProvider } from './AuthContext';function UserProfile() {const { user, logout } = useAuth();return (<div>{user ? (<><p>Welcome, {user.username}!</p><button onClick={logout}>Logout</button></>) : (<p>Please log in.</p>)}</div>);
}function LoginForm() {const { login } = useAuth();const handleLogin = () => {login('username');};return (<button onClick={handleLogin}>Login</button>);
}function App() {return (<AuthProvider><UserProfile /><LoginForm /></AuthProvider>);
}export default App;

总结

通过在 Context 和相关函数中添加类型定义,我们可以在 TypeScript 中获得更好的类型检查和智能提示。这些类型定义有助于捕获潜在的错误,并使代码更易于维护和理解。

关键字:react如何使用useContext + TS 自定义hooks

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: