我想传递一个值,我在一个函数中接收到这个值,如下所示:
const ViewDetails = item => () => {
console.log(item);
toggleModal();
}
我想将项目传递给模态组件**,如open、onclose**,在Main函数中调用:
return (
<Layout title="Dashboard" className="container-fluid">
{<Modal open={modalStatus} onClose={() => setModalStatus(false)} />}
<div className="row">
<div className="col-sm-3">
<UserLinks />
</div>
<div className="col-sm-9">
<UserInfo />
{orders ? <PurchaseHistory /> : ""}
</div>
</div>
</Layout>
)
我期待着这样的东西:{<Modal open={modalStatus} onClose={() => setModalStatus(false)} ***item={item}***/>}
,这样我就可以在Modal组件中使用item内的值。
3条答案
按热度按时间jpfvwuh41#
我想通过提供一个非常简单的示例沿着关于Context hook的React文档,在上下文API方面向@ GODWINGODWIN注解添加更多内容
通常在实践中,人们倾向于在
App.js
处 Package 提供者,为了简单起见,我将在index.js
文件处 Package 。源代码/索引.jsx
源代码/上下文/模态上下文.jsx
源代码/组件/模式.jsx
源代码/应用程序.jsx
我希望这给予你一个很好的方向如何使用React的上下文挂钩,请注意,这是一个非常基本的源代码,以了解如何
props.children
的工作原理和context
挂钩。qhhrdooz2#
您可以尝试以下操作:
对于模态构件:
或者考虑使用上下文API,它使您能够将项目调度到reducer.js文件,并使用StateProvider.js文件将其拉入Modal组件。
lskq00tm3#
您必须获取此项目的状态。当从该函数内部触发viewDetails函数时,您可以在将此状态作为props传递给任何组件后,使用此项目设置此状态