React中如何渲染含多标签的嵌入式HTML？

核心思路 #

别用dangerouslySetInnerHTML一次性塞所有标签，把样式、脚本和表单容器分开处理，用React状态控制显示隐藏，就能避免页面空白的问题。

具体步骤 #

1. 加载表单样式
   直接把样式标签加到public/index.html的<head>里最省心：

   <!-- index.html的head中添加 -->
   <link rel="stylesheet" media="screen" href="https://d3ey4dbjkt2f6s.cloudfront.net/assets/external/work_request_embed.css" />
   

   要是想在组件里动态加载（比如只在表单显示时加载），可以用useEffect：

   useEffect(() => {
     const linkExists = document.querySelector('link[href="https://d3ey4dbjkt2f6s.cloudfront.net/assets/external/work_request_embed.css"]');
     if (!linkExists) {
       const link = document.createElement('link');
       link.rel = 'stylesheet';
       link.media = 'screen';
       link.href = 'https://d3ey4dbjkt2f6s.cloudfront.net/assets/external/work_request_embed.css';
       document.head.appendChild(link);
     }
   }, []);
   

2. 动态加载表单脚本
   脚本别用innerHTML插入，用useEffect在表单显示时动态创建并添加，还能防止重复加载：

   import { useState, useEffect } from 'react';
   
   function App() {
     const [showForm, setShowForm] = useState(false);
   
     useEffect(() => {
       if (showForm) {
         // 检查脚本是否已存在，避免重复加载
         const scriptExists = document.querySelector('script[src="https://d3ey4dbjkt2f6s.cloudfront.net/assets/static_link/work_request_embed_snippet.js"]');
         if (!scriptExists) {
           const script = document.createElement('script');
           script.src = 'https://d3ey4dbjkt2f6s.cloudfront.net/assets/static_link/work_request_embed_snippet.js';
           script.setAttribute('clienthub_id', 'f6f2802e-49e8-477b-b405-8b2b18dded97');
           script.setAttribute('form_url', 'https://clienthub.getjobber.com/client_hubs/f6f2802e-49e8-477b-b405-8b2b18dded97/public/work_request/embedded_work_request_form');
           document.body.appendChild(script);
         }
       }
     }, [showForm]);
   
     // ... 其他代码
   }
   

3. 用状态控制显示隐藏
   用showForm状态切换React应用内容和表单的显示，同时添加返回按钮：

   return (
     <div>
       {/* React应用主体内容 */}
       <div style={{ display: showForm ? 'none' : 'block' }}>
         <button onClick={() => setShowForm(true)}>打开请求表单</button>
         {/* 这里放你的其他React组件内容 */}
       </div>
   
       {/* 表单容器 */}
       {showForm && (
         <div style={{ width: '100%', minHeight: '100vh' }}>
           <button onClick={() => setShowForm(false)} style={{ padding: '8px 16px', margin: '16px' }}>返回</button>
           <div id="f6f2802e-49e8-477b-b405-8b2b18dded97"></div>
         </div>
       )}
     </div>
   );
   

为什么之前的方法失效？ #

• dangerouslySetInnerHTML要求传入的HTML必须有单个根节点，多个标签直接塞会导致解析错误；
• 通过innerHTML插入的<script>标签，多数浏览器不会执行，脚本加载失败就会导致表单不渲染，页面空白。

内容的提问来源于stack exchange，提问作者Brycen Gabaldon