通过出口上下文传递多个状态变量

Question

我正在尝试利用 react-router 的 useOutletContext 将一些状态变量从我自上而下的组件（页面）传递给在出口中生成的子组件

我对如何将多个状态变量添加到上下文中有些困惑。

单个状态变量的工作代码

父组件

<Outlet context={[currentValue1, setCurrentValue1]} />

子组件

const [currentValue1, setCurrentValue1] = useOutletContext();

return (<h1>{currentValue1}</h1>)

除了currentValue1，我如何通过[currentValueN, setCurrentValueN]？

Answer 1

您可以在一个数组中传递两个以上的元素。

<Outlet
  context={[
    currentValue1, setCurrentValue1,
    currentValue2, setCurrentValue2,
    ...
    currentValueN, setCurrentValueN
  ]}
/>

您也可以使用对象。这避免了在需要第 N 个元素时跳过通过数组解构的需要，即 const [,,,,,,currentValueN] = useOutletContext();

<Outlet
  context={{
    currentValue1, setCurrentValue1,
    currentValue2, setCurrentValue2,
    ...
    currentValueN, setCurrentValueN
  }}
/>

...

const { currentValueN } = useOutletContext();

如何通过所有 data/properties 完全取决于您。

Passing Multiple State Variables through Outlet Context