我剛剛了解了 createContext 鉤子，我想知道在整個專案中全域使用多個背景關系的最佳方法是什么。
從我所看到的，如果你想創建和使用多個背景關系，它看起來有點亂，有多個嵌套的背景關系標簽，我想知道是否有一種更簡潔的方式來做到這一點？
（我認為使用四個背景關系的專案的外觀示例）
import React, { createContext, useState } from "react";
export const OneContext = createContext();
export const TwoContext = createContext();
export const ThreeContext = createContext();
export const FourContext = createContext();
export default function App(){
const [one, setOne] = useState(null);
const [two, setTwo] = useState(null);
const [three, setThree] = useState(null);
const [four, setFour] = useState(null);
return(
<>
<OneContext.Provider value={one}>
<TwoContext.Provider value={two}>
<ThreeContext.Provider value={three}>
<FourContext.Provider value={four}>
"Insert components here"
<FourContext.Provider />
<ThreeContext.Provider />
<TwoContext.Provider />
<OneContext.Provider />
</>
)
}
uj5u.com熱心網友回復：
你可以做這樣的事情
<AppContext.Provider
value={{
oneCTX: [one, setOne],
twoCTX: [two, setTwo],
threeCTX: [three,setThree]
}}
>
{props.children}
</AppContext.Provider>
在其他檔案上，您可以像這樣呼叫它們，首先從 context.js 檔案中匯入 AppContext，然后執行此操作
const { oneCTX } = useContext(AppContext);
const [one, setOne] = loggedUserCTX;
uj5u.com熱心網友回復：
當您具有涉及多個子值的復雜狀態邏輯或下一個狀態取決于前一個狀態時，useReducer通常比 useState 更可取。
import React, { createContext, useReducer } from "react";
const OneContext = createContext();
const initialState = {one:null, two:null, three:null, four:null};
function reducer(state, action) {
return {
...state,
[action.type]: action.payload
}
}
export default function App(){
const stateAndDispatch = useReducer(reducer, initialState)
return(
<>
<OneContext.Provider value={stateAndDispatch}>
"Insert components here"
<OneContext.Provider />
</>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/407191.html
標籤：
上一篇：“資料屬性”在javascript內部是否具有“訪問屬性”？
下一篇：使用JS獲取當前日期