时间戳

首页 > 解决方案 > React：如何使用 Hooks 一次将所有状态传递给子组件？

reactjs - React：如何使用 Hooks 一次将所有状态传递给子组件？

问题描述

使用类组件，当你有很多状态要传递时，而不是一个一个地传递十个状态对象，我看到你可以这样做：

<Childcomponent {...this.state}/>

或者

<Childcomponent data={this.state}/>

如果您使用 UseState 或 UseReducer，您知道如何做同样的事情吗？

我翻遍了所有地方都找不到答案。

顺便说一句，由于 React 本身建议不要过多地使用 Context API，我正在尝试找出没有它是否可以做到这一点。

标签： reactjsreact-hooks

解决方案

如果您在一个 useState 挂钩中拥有所有状态，那么只需将其传递给子组件

const [data, setData] = useState({});

<Childcomponent data={data}/>

如果您的组件中有多个 useState 挂钩，并且您想将所有状态传递给子组件

const [data, setData] = useState({});
const [data2, setData2] = useState({});
const [data3, setData3] = useState({});

<Childcomponent data={{ ...data, ...data2, ...data3 }}/>

推荐阅读