React TypeScript中动态执行formulajs及calx.js相关问题求助

先确保已安装formulajs：

npm install formulajs

以下是组件内的实现代码，支持动态解析并执行公式：

import { SUM } from 'formulajs';
import { useState } from 'react';

const FormulaExecutor = () => {
  const [result, setResult] = useState<number | null>(null);

  const executeFormula = (formulaStr: string) => {
    // 匹配函数名与参数（基础正则，适配简单公式场景）
    const match = formulaStr.match(/^(\w+)\((.*)\)$/);
    if (!match) {
      setResult(null);
      return;
    }

    const [, funcName, paramStr] = match;
    // 映射需要支持的formulajs函数，可按需扩展
    const funcMap = { SUM };

    if (!funcMap[funcName as keyof typeof funcMap]) {
      setResult(null);
      return;
    }

    try {
      // 将参数字符串转为JS实际值（仅在可信输入场景下使用eval，避免XSS风险）
      const params = eval(`(${paramStr})`);
      // 调用对应公式函数
      const res = funcMap[funcName as keyof typeof funcMap](params);
      setResult(res);
    } catch (err) {
      console.error('公式执行失败:', err);
      setResult(null);
    }
  };

  return (
    <div>
      <button onClick={() => executeFormula('SUM([1,2,3])')}>执行SUM公式</button>
      {result !== null && <p>计算结果：{result}</p>}
    </div>
  );
};

export default FormulaExecutor;

注意：如果是用户可控的输入场景，禁止使用eval，需自定义参数解析器处理数组、数字等类型，避免XSS风险。

方式1：直接导入本地calx.js文件 #

1. 将calx.js放入项目public/js目录，在public/index.html中引入：

<script src="%PUBLIC_URL%/js/calx.js"></script>

2. 创建declarations.d.ts文件添加全局类型声明，避免TS报错：

declare global {
  interface Window {
    calx: any; // 可根据calx实际API补充更具体的类型定义
  }
}

export {};

3. 在组件中调用calx：

const CalxDemo = () => {
  const initCalculator = () => {
    const calculator = new window.calx.Calculator('#spreadsheet');
    calculator.calculate();
  };

  return <button onClick={initCalculator}>初始化calx计算</button>;
};

export default CalxDemo;

方式2：将calx仓库转为npm包 #

1. 克隆calx仓库到本地，进入仓库目录：

git clone <calx仓库地址>
cd calx

2. 初始化package.json（无则执行）：

npm init -y

3. 配置rollup打包（以rollup为例）：

   • 安装依赖：npm install rollup rollup-plugin-terser --save-dev
   • 创建rollup.config.js：

   import terser from 'rollup-plugin-terser';
   
   export default {
     input: 'src/calx.js', // 替换为calx实际入口文件路径
     output: [
       {
         file: 'dist/calx.js',
         format: 'umd',
         name: 'calx'
       },
       {
         file: 'dist/calx.esm.js',
         format: 'es'
       }
     ],
     plugins: [terser()]
   };
   

4. 添加打包脚本到package.json：

{
  "scripts": {
    "build": "rollup -c"
  }
}

5. 执行打包：npm run build

6. 在React项目中安装本地包：

npm install <本地calx仓库的绝对/相对路径>

7. 在组件中导入使用：

import calx from 'calx';

const CalxDemo = () => {
  const init = () => {
    const calculator = new calx.Calculator('#spreadsheet');
    calculator.calculate();
  };
  return <button onClick={init}>启动calx计算</button>;
};

若打包后无法运行，排查点：

• 确认calx入口文件路径正确
• 检查打包输出的模块格式（UMD/ES）是否适配项目环境
• 查看控制台报错，排查依赖缺失或API调用错误

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