如何在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
}