при разборе строки HTML в React компонент таблицы исчезает в пользовательском интерфейсе
const EmailBody = () => {
const htmlDoc = '<html><head>\r\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"><style type=\"text/css\" style=\"display:none\">\r\n<!--\r\np\r\n\t{margin-top:0;\r\n\tmargin-bottom:0}\r\n-->\r\n</style></head><body dir=\"ltr\"><div style=\"font-family:Calibri,Arial,Helvetica,sans-serif; font-size:12pt; color:rgb(0,0,0); background-color:rgb(255,255,255)\"><br></div><div><div style=\"font-family:Calibri,Arial,Helvetica,sans-serif; font-size:12pt; color:rgb(0,0,0)\"><br></div><div id=\"Signature\"><div><div style=\"font-family:Calibri,Arial,Helvetica,sans-serif; font-size:12pt; color:rgb(0,0,0)\"></div><div style=\"font-family:Calibri,Arial,Helvetica,sans-serif; font-size:12pt; color:rgb(0,0,0)\"><h1 style=\"text-align:start; background-color:rgb(255,255,255); font-size:10pt; font-family:Montserrat; padding-bottom:10px\">Regards,</h1><h1 style=\"text-align:start; background-color:rgb(255,255,255); font-size:10pt; font-family:Montserrat; padding-bottom:10px\">Manu K V<br>Cloud Application Developer - Digital Services</h1></div></div></div></div><div id=\"appendonsend\"></div><hr tabindex=\"-1\" style=\"display:inline-block; width:98%\"><div id=\"divRplyFwdMsg\" dir=\"ltr\"><font face=\"Calibri, sans-serif\" color=\"#000000\" style=\"font-size:11pt\"><b>From:</b> Manu K V<br><b>Sent:</b> Thursday, July 14, 2022 12:52 PM<br><b>To:</b> uat.contact.be@careplus.co <uat.contact.be@careplus.co><br><b>Subject:</b> Test Tables data and view</font> <div> </div></div><style type=\"text/css\" style=\"display:none\">\r\n<!--\r\np\r\n\t{margin-top:0;\r\n\tmargin-bottom:0}\r\n-->\r\n</style><div dir=\"ltr\"><div class=\"x_elementToProof\" style=\"font-family:Calibri,Arial,Helvetica,sans-serif; font-size:12pt; color:rgb(0,0,0); background-color:rgb(255,255,255)\"><table cellspacing=\"0\" cellpadding=\"1\"><tbody><tr><td scope=\"\" class=\"x_elementToProof\" style=\"width:120px; border-width:1px; border-style:solid; border-color:rgb(171,171,171); background-color:transparent\">Data1</td><td scope=\"\" class=\"x_elementToProof\" style=\"width:120px; border-width:1px; border-style:solid; border-color:rgb(171,171,171); background-color:transparent\">Data2</td><td scope=\"\" class=\"x_elementToProof\" style=\"width:120px; border-width:1px; border-style:solid; border-color:rgb(171,171,171); background-color:transparent\">Data3</td></tr><tr><td scope=\"\" class=\"x_elementToProof\" style=\"width:120px; border-width:1px; border-style:solid; border-color:rgb(171,171,171); background-color:transparent\">Value1</td><td class=\"x_elementToProof\" style=\"width:120px; border-width:1px; border-style:solid; border-color:rgb(171,171,171); background-color:transparent\"><span style=\"color:rgb(0,0,0); background-color:rgb(255,255,255); display:inline!important\">Value2</span><br></td><td class=\"x_elementToProof\" style=\"width:120px; border-width:1px; border-style:solid; border-color:rgb(171,171,171); background-color:transparent\"><span style=\"color:rgb(0,0,0); background-color:rgb(255,255,255); display:inline!important\">Value3</span><br></td></tr></tbody></table><br>Thanks,<br>Manu K V</div></div></body></html>';
return (
<Row >
<Col span={2}></Col>
<Col span={22}>
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(htmlDoc.current) }}>
</div>
</Col>
</Row>
);
};
Табличные данные должны были отображаться в выделенном месте, но отсутствовали