如何在react-modal中设置组件？

Question

我正在重构业务项目中的所有模态，并且我不想浪费以前的代码的一部分。

我必须使用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>
  );
}

当用户单击卡片时，我们将其称为组件Detail 。

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

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

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

问题

我无法弄清楚如何将组件Detail传递给react-modal。 我尝试阅读文档，但找不到与此案例相关的内容。

以防万一这是到文档的链接 。

Answer 1

作为Modal的子代传递细节

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