React 值從一個組件傳遞到另一個組件

Question

我從“login.jsx”得到一個用戶名，我想將它傳遞給“App.js”以便在任何地方訪問。 我怎樣才能做到這一點？

function App() {
  const [user, setUser] = useState(null);
     
     useEffect(() => {
        
    }, []);
  return (
    <BrowserRouter>
    <Offer/>
    <Navigationbar/>
      <Route path="login" element={user ? <Navigate to="/courses" /> : <Login />} />
    </Routes>
    <Footer />
    </BrowserRouter>

  );
}

Answer 1

您可以將回調 function 作為道具傳遞給登錄組件，並在登錄組件中調用此道具並將用戶名作為參數傳遞，然后在回調 function 中調用 setUser ZC1C425268E68385D1AB5074C17A94 的值

function App() {
  const [user, setUser] = useState(null);

  const updateUser = (value) => {
      setUser(value);
  }
     
     useEffect(() => {
        
    }, []);
  return (
    <BrowserRouter>
    <Offer/>
    <Navigationbar/>
      <Route path="login" element={user ? <Navigate to="/courses" /> : <Login updateUser={updateUser} />} />
    </Routes>
    <Footer />
    </BrowserRouter>

  );
}

Answer 2

這是您如何做到的

應用程序.jsx

function App() {
  const [user, setUser] = useState(null);
     
     useEffect(() => {
        
    }, []);

  const updateUser = (newUser) => {
     setUser(newUser);
  }

  return (
    <BrowserRouter>
    <Offer/>
    <Navigationbar/>
      <Route path="login" element={user ? <Navigate to="/courses" /> : <Login onNewUser={updateUser} />} />
    </Routes>
    <Footer />
    </BrowserRouter>

  );
}

在 Login.jsx 中，當您獲得新用戶調用 props.updateUser(user)

Answer 3

你可以用 React Context 做到這一點；

基本上，上下文是全局狀態。 您可以在此處閱讀更多信息： https://reactjs.org/docs/context.html

它允許您將<App />包裝到上下文提供程序中，並向您的包裝器傳遞一個您將能夠在您的應用程序中使用的值。