gpt4 book ai didi

javascript - 如何在react-modal中设置组件?

转载 作者:行者123 更新时间:2023-12-02 23:13:05 25 4
gpt4 key购买 nike

我正在重构业务项目中的所有模式,我不想浪费之前的代码的一部分。

我必须使用 react 模式库。

这是引入react-modal之前的原始组件

function Detail({
title, supervisor, architect, initiator, id, cost, description, chipText, configurationElement,
}) {
return (
<div className={styles.blueBackground}>
<div className={styles.container}>
<Header title={title} />
<BlueLightRow cost={cost} id={id} chipText={chipText} />
<DetailSection
supervisor={supervisor}
architect={architect}
claimant={initiator}
description={description}
configurationElement={configurationElement}
/>
</div>
</div>
);
}

当用户单击卡片时,我们调用组件Detail

现在在父组件中我使用这些行

{
modalState ? <Modal isOpen={modalState} afterOpenModal={afterOpenModal} onRequestClose={() => setModalState(false)} ariaHideApp={false} /> : null
}

这个想法是当 modalStatetrue 时传递/或渲染整个 Detail 组件。

问题

我不知道如何将组件Detail传递给react-modal。我尝试阅读文档,但找不到与此案例相关的内容。

以防万一 this is the link到文档。

最佳答案

将详细信息作为 Modal 的子项传递

{modalState ? 
(<Modal
isOpen={modalState}
afterOpenModal={afterOpenModal}
onRequestClose={() => setModalState(false)}
ariaHideApp={false}
>
<Detail />
/>) : null
}

关于javascript - 如何在react-modal中设置组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57268765/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com