React开发Teams应用：字符串函数执行报错及HTML/JS渲染问题

1. eval定义函数后无法访问的问题 #

在React/Teams应用的模块作用域中，直接eval函数声明不会将函数挂载到全局或当前作用域，导致外部无法访问。解决方法有两种：

• 将函数挂载到全局对象：

  var f = "window.jsFunction = function(){console.log('test');}";
  eval(f);
  window.jsFunction(); // 直接调用全局对象上的函数
  

  这种方式会把函数暴露到全局，适合需要全局访问的场景。

• 使用函数表达式赋值：

  const jsFunction = eval("(function(){console.log('test');})");
  jsFunction();
  

  这种方式将eval的结果直接赋值给变量，作用域更可控，避免污染全局。

2. dangerouslySetInnerHTML中JS不执行的问题 #

React的dangerouslySetInnerHTML仅渲染DOM结构，不会自动执行其中的<script>标签内容。需要手动提取并执行脚本：

实现步骤： #

1. 用DOMParser解析HTML字符串，提取所有内联脚本内容；
2. 逐个执行脚本内容（注意作用域问题，必要时挂载到全局）；
3. 将处理后的HTML（可移除已执行的<script>标签）通过dangerouslySetInnerHTML渲染。

示例代码： #

import { useState, useEffect } from 'react';

const YourComponent = () => {
  const [processedHtml, setProcessedHtml] = useState('');

  useEffect(() => {
    fetch('你的自有站点接口')
      .then(res => res.text())
      .then(rawContent => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(rawContent, 'text/html');
        
        // 提取并执行所有内联脚本
        const scripts = doc.querySelectorAll('script');
        scripts.forEach(script => {
          if (script.textContent.trim()) {
            // 执行脚本，如需全局访问可挂载到window
            eval(script.textContent);
          }
        });
        
        // 移除已处理的script标签，避免重复渲染
        scripts.forEach(script => script.remove());
        setProcessedHtml(doc.body.innerHTML);
      });
  }, []);

  return <div dangerouslySetInnerHTML={{ __html: processedHtml }} />;
};

export default YourComponent;

是否需要拆分组件？ #

不需要强制拆分，上述逻辑可以在同一个组件内完成。如果后续HTML渲染和JS执行的逻辑变得复杂，再考虑拆分为专门的工具函数或子组件（比如一个负责解析脚本的钩子，一个负责渲染HTML的组件），提升代码可维护性。

内容的提问来源于stack exchange，提问作者Jacques Célère