Javascript 如何返回复杂的<；部门></部门>；直接从状态传递到React中的子组件

我需要从我的父母那里向我的子组件传递一大块文本。 我有一个带有state的类组件，我想在其中向modal传递文本。问题是，这是一个相当大的文本块

我的状态

state={
 iten:[
 {
  id: 1,
  header: 'header text',
  bigChunkForModal:
   <div>
    <p>pargaraph text1</P
     <ul><li> List item 1</li></ul>
    <p>pargaraph text2</P
     <ul><li> List item 2</li></ul>
    <p>pargaraph text3</P
     <ul><li> List item 3</li></ul>
   </div>,
   modalHeader: 'Modal header
   },
  ],
}:

状态={
iten：[
{
id:1，
标题：“标题文本”，
bigChunkForModal：
pargaraph text1虽然可以工作，但可以稍微改变组件API的结构，使其更加明显

<Modal show = {show} header="Demo Modal" onClose={}>
   <div>This will be available in the modal component as props.childrent {text}</div>
</Modal>


这将作为props.childrent{text}在模态组件中提供

模态按钮将在模态组件中抽象。通过这样做，您可以将模态内容作为模态定义的一部分传递，并且在模态组件内部，您可以获取子道具并在适当的位置渲染。我只给出了占位符。{}值可以是动态的

注意：如果您可以将当前的MVP工作代码放在jsbin/codepen中，我可以更新修改后的结构，以避免使用HTML填充状态。
您可能不应该尝试将JSX（或HTML）存储在状态中。相反，请存储呈现模式内容所需的数据。请参阅此答案，谢谢。将检查此主题
const ModalOverlay = ({
  className,
  modalHeader,
  show,
  modalId,
  modalText,
  classModal,
  close,
}) => {
  const content = (
    <div
      className={`Modal__Container ${className}`}
      style={{
        display: show ? 'inline' : 'none',
      }}>
      <div key={modalId} className={`Modal__Content ${className}`}>
        <h2>{modalHeader}</h2>
        <div>{modalText}</div>
        <button className={`btn ${classModal}`} onClick={close}>
          Zamknij
        </button>
      </div>
    </div>
  );
  return ReactDOM.createPortal(
    content,
    document.getElementById('modal-portal')
  );
};

<Modal show = {show} header="Demo Modal" onClose={}>
   <div>This will be available in the modal component as props.childrent {text}</div>
</Modal>