使用 TypeScript 和 Next.JS 的 Context API

如何使用 TypeScript 和 next.JS 编写上下文 API

为什么我们需要背景？

在典型的 React 应用中，数据通过 props 自上而下（从父组件到子组件）传递，但对于应用中许多组件都需要的某些类型的 props（例如语言环境偏好、UI 主题），这种用法可能会很繁琐。Context 提供了一种在组件之间共享此类值的方法，而无需在组件树的每一层都显式传递 props。阅读更多

什么是 contextAPI？

Context 提供了一种通过组件树传递数据的方法，而无需在每个级别手动传递 props。

所以，现在我们知道了为什么需要上下文以及什么是上下文，让我们深入研究编码部分。

开始之前，使用 TypeScript 设置 NextJS 应用的基本版本



npx create-next-app context-api
npm install --save-dev typescript @types/react

创建一个名为context的文件夹，用于存储所有不同的上下文。现在，创建一个AuthContext.tsx文件。

步骤 1：创建上下文类型

在 AuthContext.tsx 中。
由于我们使用 TypeScript，因此必须为上下文创建类型



type authContextType = {
    user: boolean;
    login: () => void;
    logout: () => void;
};

步骤 2：创建上下文默认值



const authContextDefaultValues: authContextType = {
    user: null,
    login: () => {},
    logout: () => {},
};

步骤 3：- createContext 和 useContext



const AuthContext = createContext<authContextType>(authContextDefaultValues);

export function useAuth() {
    return useContext(AuthContext);
}

步骤 4：创建提供程序函数



type Props = {
    children: ReactNode;
};

export function AuthProvider({ children }: Props) {
    const value = {

    }
    return (
        <>
            <AuthContext.Provider value={value}>
                {children}
            </AuthContext.Provider>
        </>
    );
}

我们将包装这个AuthProvider函数，在其中使用我们的上下文，并且 value 属性将包含 authContextType 的值。我们将在下一步中填充这些值。

步骤 4：填写值



export function AuthProvider({ children }: Props) {
    const [user, setUser] = useState<boolean>(null);

    const login = () => {
        setUser(true);
    };

    const logout = () => {
        setUser(false);
    };

    const value = {
        user,
        login,
        logout,
    };

    return (
    ...

现在我们的上下文已可以使用了。

步骤 5：启用 AuthProvider

首先，我们必须启用AuthProvider，为此，请像这样编辑默认的 _app.js 文件



import { AuthProvider } from "../context/AuthContext";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
    return (
        <>
            <AuthProvider>
                <Component {...pageProps} />
            </AuthProvider>
        </>
    );
}

export default MyApp;

步骤 6：使用上下文

现在删除所有模板 nextJS 生成并简单地导入上下文



import Head from "next/head";
import styles from "../styles/Home.module.css";
import { useAuth } from "../context/AuthContext";

export default function Home() {
    const { user, login, logout } = useAuth();

    return (
        <div className={styles.container}>
            <Head>
                <title>Context-api with TypeScript and nextJS</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <main className={styles.main}>
                <div>
                    <h1>Hello Context</h1>
                    <h2>User: {user ? "login" : "logout"}</h2>
                    <div>
                        <button onClick={login}>Login</button>
                        <button onClick={logout}>Logout</button>
                    </div>
                </div>
            </main>
        </div>
    );
}

好的，这里发生了很多事情，让我来分解一下，首先我们导入上下文钩子“useAuth”，然后在我们的 Home() 中解构“useAuth”中的所有值，然后根据我们的要求使用它。

查看现场演示
 Github repo

我的投资组合
 Linkedin
twitter

文章来源：https://dev.to/shareef/context-api-with-typescript-and-next-js-2m25