代码之家 › 专栏 › 技术社区 › Ahmed Haque

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

react-router reactjs

1

Ahmed Haque · 技术社区 · 4 年前

我想利用路由器的 useOutletContext 将几个状态变量从我的自上而下组件(页面)传递给outlet中生成的子级

我有点纠结于如何添加倍数将状态变量转换为上下文。

单个状态变量的工作代码

父组件

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

子组件

const [currentValue1, setCurrentValue1] = useOutletContext();

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

我该怎么通过 [currentValueN, setCurrentValueN] 除了 currentValue1 ?

1 回复 | 直到 4 年前

1

Drew Reese 4 年前

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

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

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

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

...

const { currentValueN } = useOutletContext();

如何传递所有数据/属性完全取决于您。