我目前有一個背景關系：
const statusContext = React.createContext({
Status: 'login',
setStatus: () => {
Status:
Status === "login"
? "signin"
: "login"
},
});
我想Status在幾個單獨的非嵌套函式中使用，并且我也希望能夠更改Status每個函式中的值。我在指南中閱讀了如何從嵌套組件執行此操作；然而，這不是我的情況。希望得到一些指導，不確定這是否是正確的方法。
uj5u.com熱心網友回復：
在反應中，一切都在樹中進行。所以如果你想使用背景關系 api，你需要有嵌套的組件。所以你唯一的選擇是制作一個包裝器組件并將它移動到你的應用程式的頂部。然后你可以像這樣使用背景關系 api：
const StatusContext = React.createContext()
const StatusProvider = ({children}) => {
const [status, setStatus] = useState('login')
return <StatusContext.Provider value={{status, setStatus}}>{children}</StatusContext.Provider>
}
const StatusDisplay = () => {
const {status} = useContext(StatusContext)
return (
<div>{status}</div>
)
}
const StatusSwitcher = () => {
const {setStatus} = useContext(StatusContext)
return <button onClick={() => setStatus('logged in')}>Login</button>
}
const App = () => {
return (
<StatusProvider>
<StatusDisplay />
<StatusSwitcher />
</StatusProvider>
);
};
uj5u.com熱心網友回復：
您可以將狀態傳遞到背景關系中并從任何嵌套組件進行更新。
import { useState, useContext, createContext } from "react";
const UserContext = createContext("Unknown");
export default function Application() {
const [userName, setUserName] = useState("paul");
return (
<UserContext.Provider value={{ userName, setUserName }}>
<Layout>Main content</Layout>
</UserContext.Provider>
);
}
function Layout({ children }) {
return (
<div>
<Header />
<main>{children}</main>
</div>
);
}
function Header() {
return (
<header>
<UserInfo />
</header>
);
}
function UserInfo() {
const { userName, setUserName } = useContext(UserContext);
return (
<>
<button onClick={() => setUserName("michael")}>
change Name in context
</button>
<div>{userName}</div>
</>
);
}
作業示例：https : //codesandbox.io/s/busy-euler-66gel?file=/src/App.js : 0-790
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/400364.html
標籤：反应
上一篇：使組件的行為獨立