如何在反应模态中设置组件？

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
}

想法是 pass/or 在 modalState 为 true 时呈现整个 Detail 组件。

问题

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

以防万一 this is the link 文档。

Answer 1

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

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

如何在反应模态中设置组件？

how to set a component in react-modal?

javascript

modal-dialog

reactjs

react-modal