如何在 Outlet Context 中發送多個上下文？ 反應路由器dom v6

Question

首先，我在我的項目中使用 react-router-dom v6。 如您所知，它具有提供管理路線的 Outlet。 下面的例子完美地工作

這是父路由。 布局.js

    export default function Layout() {
            const [darkMode, setDarkMode] = useState(false);
        
    return (
    
    /* Header*/
    
    /* Content*/
    <Outlet context={[darkMode, setDarkMode]} />
    
    /* footer*/
                
    )
}

這是子路線。 登錄.js

export default function Login() {
             const [darkMode, setDarkMode] = useOutletContext();

    return (
/*Some Codes*/    
    )
}

當我想發送多個帶有上下文的道具時，它不起作用。

像這樣：

export default function Layout() {
                const [darkMode, setDarkMode] = useState(false);
            

const [color, setColor] = useState("#fff");
    
        return (
    
        /* Header*/
    
        /* Content*/
        <Outlet context={{ darkMode: [darkMode, setDarkMode], color: [color, setColor] }} />
    
        /* footer*/
    
        )
    }
    
    


export default function Login() {
                 const [darkMode, setDarkMode] = useOutletContext();
    const [color, setColor] = useOutletContext();
    
        return (
    /*Some Codes*/    
        )
    }

如何使用 Outlet Context 發送多個道具？ 可能嗎？

Answer 1

我認為你通過道具傳遞顏色和 setcolor 都是錯誤的，我們只能傳遞我們顏色中的數據，所以嘗試只傳遞顏色而不是 setColor，如果仍然存在問題，那么也刪除你的數組

Answer 2

在第一個代碼示例中， Outlet的上下文值為[darkMode, setDarkMode] ，並且代碼正確地使用數組解構賦值來訪問darkMode和setDarkMode 。

<Outlet context={[darkMode, setDarkMode]} />

...

const [darkMode, setDarkMode] = useOutletContext();

現在在第二個示例中， Outlet提供了不同形狀的上下文值{ darkMode: [darkMode, setDarkMode], color: [color, setColor] } 。 現在改為 object，具有darkMode和color屬性。 出口上下文消費者現在必須使用object 解構賦值來訪問這些值。

<Outlet
  context={{
    darkMode: [darkMode, setDarkMode],
    color: [color, setColor],
  }}
/>

...

const { darkMode, color } = useOutletContext();
// darkmode -> [darkMode, setDarkMode]
// color    -> [color, setColor]
darkMode.darkMode
darkMode.setDarkMode
... etc...

您也可以將 object 解構與變量重命名和數組解構分配結合起來。

const {
  darkMode: [darkMode, setDarkMode],
  color: [color, setColor],
} = useOutletContext();