[英]how to set a component in react-modal?
I'm refactoring all the modals in a business project and I don't want to waste a part of the previous code. 我正在重构业务项目中的所有模态,并且我不想浪费以前的代码的一部分。
I've to use react-modal library. 我必须使用react-modal库。
this is the original component before the introduction of react-modal 这是在引入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>
);
}
We Called the component Detail
when the user click on card. 当用户单击卡片时,我们将其称为组件Detail
。
now in a father component I use these lines 现在在父亲组件中,我使用这些行
{
modalState ? <Modal isOpen={modalState} afterOpenModal={afterOpenModal} onRequestClose={() => setModalState(false)} ariaHideApp={false} /> : null
}
the idea is to pass/or render the entire Detail
component when the modalState
is true
. 这个想法是当modalState
为true
时传递/或渲染整个Detail
组件。
Problem 问题
I cannot figure how to pass the component Detail
to react-modal. 我无法弄清楚如何将组件Detail
传递给react-modal。 I tried to read the documentation but I wasn't able to find something linked to this case. 我尝试阅读文档,但找不到与此案例相关的内容。
just in case this is the link to the documentation. 以防万一这是到文档的链接 。
Pass detail as a child of Modal 作为Modal的子代传递细节
{modalState ?
(<Modal
isOpen={modalState}
afterOpenModal={afterOpenModal}
onRequestClose={() => setModalState(false)}
ariaHideApp={false}
>
<Detail />
/>) : null
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.