React中Helmet标签内text/html类型script无法执行的解决方法

我是UI与React新手，在某页面中使用了type="text/html"的script标签，内部包含一段HTML代码。已将该标签放入React的Helmet组件中，但页面未显示对应内容，求可行解决办法。注：项目中已存在BrowserRoutes，无法移除。

代码示例 #

<script type="text/html" id="table-header-template">
    { `
    <div className="d-flex align-items-end">
                    <h6 className="mb-0">Filters Applied: </h6>
                    <div className="px-2" id="filter-panel"></div>
                    <div className="ml-auto text-right flex-shrink-0">
                        <a id="clear-filter" className="pr-2" href="#">Clear All</a>
                        <button id="download-excel" className="btn btn-sm btn-outline-primary"><i className="fh-icon icon-excel fs-xl">&#xe817;</i><span style={dnldExcelStyle}>Download Excel</span></button>&nbsp;&nbsp;
                        <a href="#" className="btn btn-outline-primary btn-sm" data-toggle="dropdown"><span style={sortDrpdwnStyle}>Sort By</span><i className="fh-icon icon-down-arrow">&#xe813;</i></a>
                            <div className="dropdown-menu dropdown-md">
                                <div className="dropdown-divider m-0"></div>
                                <div className="d-flex flex-row dropdown-item">
                                    <span className="label mr-auto p-2"></span>
                                    <a href="#" className="p-2 btn-outline-success"><i className="fal fa-arrow-from-bottom"></i></a>
                                    <a href="#" className="p-2 btn-outline-success"><i className="fal fa-arrow-from-top"></i></a>
                                </div>
                            </div>
                    </div>      
            </div>

`}
           </script>



return (
  <>
  <Helmet>
 <script type="text/html" id="table-header-template">
        { `
        <div className="d-flex align-items-end">
                        <h6 className="mb-0">Filters Applied: </h6>
                        <div className="px-2" id="filter-panel"></div>
                        <div className="ml-auto text-right flex-shrink-0">
                            <a id="clear-filter" className="pr-2" href="#">Clear All</a>
                            <button id="download-excel" className="btn btn-sm btn-outline-primary"><i className="fh-icon icon-excel fs-xl">&#xe817;</i><span style={dnldExcelStyle}>Download Excel</span></button>&nbsp;&nbsp;
                            <a href="#" className="btn btn-outline-primary btn-sm" data-toggle="dropdown"><span style={sortDrpdwnStyle}>Sort By</span><i className="fh-icon icon-down-arrow">&#xe813;</i></a>
                                <div className="dropdown-menu dropdown-md">
                                    <div className="dropdown-divider m-0"></div>
    <div className="d-flex flex-row dropdown-item">
    <span className="label mr-auto p-2"></span>
    <a href="#" className="p-2 btn-outline-success"><i className="fal fa-arrow-from-bottom"></i></a>
    <a href="#" className="p-2 btn-outline-success"><i className="fal fa-arrow-from-top"></i></a>
    </div>
  </div>
                        </div>      
                </div>
    
    `}
               </script>
</Helmet>
... other code
)
</>

核心问题说明 #

type="text/html"的script标签本身不会被浏览器自动渲染到页面，它只是作为HTML模板字符串存储在DOM中，需要手动读取并插入到页面指定位置才能显示。另外你代码里的React语法错误（模板中直接使用JSX变量）也会导致内容无法正常工作。

方法1：用React组件替代模板（推荐） #

React项目里完全没必要用HTML模板script标签，直接把这段内容写成React组件，更符合React开发逻辑，也避免模板操作的麻烦：

// 定义表头组件
const TableHeader = ({ dnldExcelStyle, sortDrpdwnStyle }) => (
  <div className="d-flex align-items-end">
    <h6 className="mb-0">Filters Applied: </h6>
    <div className="px-2" id="filter-panel"></div>
    <div className="ml-auto text-right flex-shrink-0">
      <a id="clear-filter" className="pr-2" href="#">Clear All</a>
      <button id="download-excel" className="btn btn-sm btn-outline-primary">
        <i className="fh-icon icon-excel fs-xl">&#xe817;</i>
        <span style={dnldExcelStyle}>Download Excel</span>
      </button>&nbsp;&nbsp;
      <a href="#" className="btn btn-outline-primary btn-sm" data-toggle="dropdown">
        <span style={sortDrpdwnStyle}>Sort By</span>
        <i className="fh-icon icon-down-arrow">&#xe813;</i>
      </a>
      <div className="dropdown-menu dropdown-md">
        <div className="dropdown-divider m-0"></div>
        <div className="d-flex flex-row dropdown-item">
          <span className="label mr-auto p-2"></span>
          <a href="#" className="p-2 btn-outline-success"><i className="fal fa-arrow-from-bottom"></i></a>
          <a href="#" className="p-2 btn-outline-success"><i className="fal fa-arrow-from-top"></i></a>
        </div>
      </div>
    </div>      
  </div>
);

// 在页面中直接使用组件
return (
  <>
    <TableHeader dnldExcelStyle={dnldExcelStyle} sortDrpdwnStyle={sortDrpdwnStyle} />
    {/* 其他代码 */}
  </>
);

方法2：手动渲染HTML模板（若必须保留模板方式） #

如果一定要用type="text/html"的模板，需要在组件挂载后读取模板内容，插入到页面DOM中，同时处理模板里的React变量：

import { useEffect, useRef } from 'react';
import { Helmet } from 'react-helmet';

const YourPage = () => {
  const containerRef = useRef(null);
  const dnldExcelStyle = { /* 你的样式定义 */ };
  const sortDrpdwnStyle = { /* 你的样式定义 */ };

  useEffect(() => {
    // 读取script模板内容
    const template = document.getElementById('table-header-template')?.textContent;
    if (template && containerRef.current) {
      // 替换模板中的React变量为实际样式字符串
      const compiledTemplate = template
        .replace('{dnldExcelStyle}', JSON.stringify(dnldExcelStyle))
        .replace('{sortDrpdwnStyle}', JSON.stringify(sortDrpdwnStyle));
      // 将模板内容插入到容器中
      containerRef.current.innerHTML = compiledTemplate;
    }
  }, [dnldExcelStyle, sortDrpdwnStyle]);

  return (
    <>
      <Helmet>
        <script type="text/html" id="table-header-template">
          <div className="d-flex align-items-end">
            <h6 className="mb-0">Filters Applied: </h6>
            <div className="px-2" id="filter-panel"></div>
            <div className="ml-auto text-right flex-shrink-0">
              <a id="clear-filter" className="pr-2" href="#">Clear All</a>
              <button id="download-excel" className="btn btn-sm btn-outline-primary">
                <i className="fh-icon icon-excel fs-xl">&#xe817;</i>
                <span style="{dnldExcelStyle}">Download Excel</span>
              </button>&nbsp;&nbsp;
              <a href="#" className="btn btn-outline-primary btn-sm" data-toggle="dropdown">
                <span style="{sortDrpdwnStyle}">Sort By</span>
                <i className="fh-icon icon-down-arrow">&#xe813;</i>
              </a>
              <div className="dropdown-menu dropdown-md">
                <div className="dropdown-divider m-0"></div>
                <div className="d-flex flex-row dropdown-item">
                  <span className="label mr-auto p-2"></span>
                  <a href="#" className="p-2 btn-outline-success"><i className="fal fa-arrow-from-bottom"></i></a>
                  <a href="#" className="p-2 btn-outline-success"><i className="fal fa-arrow-from-top"></i></a>
                </div>
              </div>
            </div>      
          </div>
        </script>
      </Helmet>
      {/* 准备容器用于渲染模板内容 */}
      <div ref={containerRef}></div>
      {/* 其他代码 */}
    </>
  );
};

export default YourPage;

关键注意事项 #

• 原代码中{dnldExcelStyle}和{sortDrpdwnStyle}是JSX语法，HTML模板无法识别，必须替换为实际样式字符串或直接内联样式。
• BrowserRoutes和此问题无关，两种方法都能兼容，无需移除。
• 方法1是React标准写法，更易维护、更安全（避免innerHTML的XSS风险），优先推荐。

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