使用 React 和 Gatsby 傳遞道具

Question

我的 Login.js 中有我所有的 firebase 函數和變量，但我的 Dashboard.js 還需要訪問其中兩個道具。 出於某種原因，無論我嘗試什么，我都無法讓它工作。 因為我使用的是 gatsby，所以它們也是兩個不同的頁面。

這是我的 Login.js 代碼（我想要傳遞的所有函數都在其中）

import React, { useState, useEffect, Component } from "react";
import "../css/Login.css";
import { Link, navigate } from "gatsby";
import BackGround from "../components/bg";
import Navbar from "../components/navbar";
import fire from "../components/fire";

const Login = () => {
  const [user, setUser] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [emailError, setEmailError] = useState("");
  const [passwordError, setPasswordError] = useState("");
  const [hasAccount, setHasAccount] = useState(false);

  const clearInputs = () => {
    setEmail("");
    setPassword("");
  };

  const clearErrors = () => {
    setEmailError("");
    setPasswordError("");
  };

  const handleLogin = () => {
    clearErrors();
    fire
      .auth()
      .signInWithEmailAndPassword(email, password)
      .catch((err) => {
        switch (err.code) {
          case "auth/invalid-email":
          case "auth/user-disabled":
          case "auth/user-not-found":
            setEmailError(err.message);
            break;
          case "auth/wrong-password":
            setPasswordError(err.message);
            break;
        }
      });
  };

  const handleSignup = () => {
    clearErrors();
    fire
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .catch((err) => {
        switch (err.code) {
          case "auth/email-already-in-use":
          case "auth/invalid-email":
            setEmailError(err.message);
            break;
          case "auth/weak-password":
            setPasswordError(err.message);
            break;
        }
      });
  };

  const handleLogout = () => {
    fire.auth().signOut();
  };

  const authListener = () => {
    fire.auth().onAuthStateChanged((user) => {
      if (user) {
        clearInputs();
        setUser(user);
      } else {
        setUser("");
      }
    });
  };

  useEffect(() => {
    authListener();
  }, []);

  return (
    <div>
      <BackGround />
      <Navbar />
      {/* {user
        ? (navigate("/dashboard", { replace: true }),
          (<Dashboard handleLogout={handleLogout} user={user} />))
        : null} */}
      {user ? <h1>User</h1> : <h1>No user</h1>}
      <section className="form-signin">
        {hasAccount ? (
          <h2 className="form-signin-heading">Login</h2>
        ) : (
          <h2 className="form-signin-heading">Signup</h2>
        )}
        <label className="control-label form-labels">Email</label>
        <input
          className="form-input"
          placeholder="Enter email"
          type="text"
          autoFocus
          required
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <p className="errorMsg">{emailError}</p>
        <label className="control-label form-labels">Password</label>
        <input
          className="form-input"
          placeholder="Enter password"
          type="password"
          required
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <p className="errorMsg">{passwordError}</p>

        {hasAccount ? (
          <>
            <p className="AHAC">
              Not Registered?{" "}
              <span onClick={() => setHasAccount(!hasAccount)} className="AHAC">
                Create an account.
              </span>
            </p>
            <center>
              <button className="form-button" onClick={handleLogin}>
                Login
              </button>
            </center>
          </>
        ) : (
          <>
            <p className="AHAC">
              Already have an account?{" "}
              <span className="AHAC" onClick={() => setHasAccount(!hasAccount)}>
                Sign In.
              </span>
            </p>
            <center>
              <button className="form-button" onClick={handleSignup}>
                Signup
              </button>
            </center>
          </>
        )}
      </section>
    </div>
  );
};

export default Login;

這是我的 Dashboard.js（需要訪問 handleLogout function 和用戶變量）

import { navigate } from "gatsby";
import React from "react";
import BackGround from "../components/bg";
import Navbar from "../components/navbar";
const Dashboard = ({ handleLogout, user }) => {
  return (
    <div>
      <BackGround />
      <Navbar />
      {/* {user ? null : navigate("/Login")} */}
      {user ? <h1>User</h1> : <h1>No user</h1>}

      <h1 className="welcome-text">Welcome, User</h1>
      <h1 className="page-header">You have generated 100 Facts!</h1>
      <center>
        <button className="logout-button" onClick={handleLogout}>
          Logout
        </button>
      </center>
    </div>
  );
};

export default Dashboard;

一如既往，任何幫助將不勝感激，謝謝！

Answer 1

您可以使用React Hooks和React Context的組合來實現這一點。 是的，您可以將React Context 與 Gatsby 一起使用。 看看這個useAuth 。 您可以以此為基礎來構建您自己的自定義鈎子。 像這樣的東西：

創建您的自定義掛鈎

const AuthContext = React.createContext();

export function AuthProvider({ children }) {
  const auth = useProvideAuth();
  return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
}

export const useAuth = () => {
  return useContext(authContext);
};

function useProvideAuth() {
  //The auth state and methods you need
  const [user, setUser] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [emailError, setEmailError] = React.useState("");
  const [passwordError, setPasswordError] = React.useState("");
  const [hasAccount, setHasAccount] = React.useState(false);

  const clearInputs = () => {
    //...
  };

  const clearErrors = () => {
    //...
  };

  const handleLogin = () => {
    //...
  };

  const handleSignup = () => {
    //...
  };

  const handleLogout = () => {
    //...
  };

  const authListener = () => {
    //...
  };

  React.useEffect(() => {
    //...
  }, []);

  return {
    user,
    handleLogin,
    handleLogout,
  };
}

在 Gatsby 瀏覽器文件 (gatsby-browser.js) 中添加提供程序

import React from "react"
import { AuthProvider } from "./src/context/AuthContext"
export const wrapRootElement = ({ element }) => (
  <AuthProvider>{element}</AuthProvider>
)

在你的組件中使用它

const Dashboard = ({ handleLogout, user }) => {
  const auth = useAuth();
  // you can access auth.user, auth.logout
  return (
    <div>...</div>
  );
};