如何在Next.js React组件中执行字符串形式的JS代码

原代码的核心问题 #

1. 参数未解构：组件参数(formJsCode)接收的是整个props对象，而非传入的目标变量，需改为({ formJsCode })。
2. SSR环境限制：Next.js服务器端渲染时无法安全执行动态代码，必须确保代码仅在客户端运行。
3. eval的局限性：直接使用eval不仅存在作用域污染风险，返回的结果也无法直接正确渲染为React元素。

方案1：使用new Function执行预编译的JS代码 #

如果你的formJsCode是已编译为React.createElement格式的可执行JS代码（非原始JSX），推荐此方案：

import { useEffect, useState } from 'react';

const DForm = ({ formJsCode }) => {
  const [formElement, setFormElement] = useState(null);

  useEffect(() => {
    if (!formJsCode) return;

    try {
      // 创建独立作用域的函数执行代码，避免污染当前组件作用域
      const createForm = new Function('React', formJsCode);
      // 传入React依赖，执行代码生成React元素
      const element = createForm(React);
      setFormElement(element);
    } catch (err) {
      console.error('表单代码执行失败:', err);
    }
  }, [formJsCode]);

  return <div>{formElement}</div>;
};

export default DForm;

方案2：实时编译JSX代码（仅开发环境推荐） #

如果formJsCode是原始JSX字符串，需要先编译为可执行JS代码，可借助@babel/standalone实现：

1. 安装依赖：

npm install @babel/standalone

2. 组件代码：

import { useEffect, useState } from 'react';
import * as Babel from '@babel/standalone';

const DForm = ({ formJsCode }) => {
  const [formElement, setFormElement] = useState(null);

  useEffect(() => {
    if (!formJsCode) return;

    try {
      // 将JSX编译为React.createElement格式的代码
      const compiledCode = Babel.transform(formJsCode, {
        presets: ['react'],
      }).code;
      // 创建函数执行编译后的代码
      const createForm = new Function('React', compiledCode);
      const element = createForm(React);
      setFormElement(element);
    } catch (err) {
      console.error('表单代码编译/执行失败:', err);
    }
  }, [formJsCode]);

  return <div>{formElement}</div>;
};

export default DForm;

关键注意事项 #

• 安全风险：动态执行外部来源的代码存在极高XSS攻击风险，必须确保formJsCode的来源完全可信，绝不允许执行未验证的用户输入代码。
• SSR兼容性：通过useEffect确保代码仅在客户端执行，避免Next.js服务器端渲染时出现错误。
• 代码格式要求：方案1中，formJsCode必须是能返回React元素的可执行代码，示例格式如下：

  "return React.createElement('form', {id: 'my-form'}, React.createElement('input', {type: 'text', name: 'username'}))"
  

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