如何在NextJS中将字符串形式的React模板渲染为DOM？

你提到的next-mdx-remote仅适用于MDX格式，针对纯JSX字符串模板的渲染需求，有两种直接可行的方案：

方案一：使用react-jsx-parser库（推荐） #

这是专门用来解析JSX字符串的工具，配置简单，还能安全地映射你自定义的组件。

步骤： #

1. 安装依赖：

npm install react-jsx-parser
# 或者
yarn add react-jsx-parser

2. 编写渲染代码：

import React from 'react';
import JSXParser from 'react-jsx-parser';
// 导入你定义的组件
import { Section, HelloWorld, Hello } from './your-components-path';

// 你的字符串模板
const templateString = `
<Section>
  <div>
    <HelloWorld />
  </div>
  <Hello name="my name" />
</Section>
`;

function App() {
  return (
    <JSXParser
      jsx={templateString}
      // 把自定义组件映射给解析器
      components={{ Section, HelloWorld, Hello }}
    />
  );
}

export default App;

这个库会自动解析JSX结构，识别你传入的自定义组件，最终渲染出正确的DOM。它还支持处理props、事件，甚至可以限制允许渲染的组件，安全性比直接编译代码更高。

方案二：用@babel/standalone实时编译JSX #

如果你需要更灵活的控制，可以用Babel在浏览器端实时编译JSX字符串，转换成React能识别的代码。

步骤： #

1. 安装依赖：

npm install @babel/standalone
# 或者
yarn add @babel/standalone

2. 编写渲染组件：

import React, { useState, useEffect } from 'react';
import { transform } from '@babel/standalone';
import { Section, HelloWorld, Hello } from './your-components-path';

const RenderReactTemplate = ({ template }) => {
  const [renderedComponent, setRenderedComponent] = useState(null);

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

    try {
      // 把JSX字符串编译成React.createElement形式的代码
      const compiledCode = transform(template, {
        presets: ['react'],
      }).code;

      // 创建一个可执行的函数，传入React和自定义组件
      const getComponent = new Function(
        'React', 'Section', 'HelloWorld', 'Hello',
        `return ${compiledCode}`
      );

      // 生成组件并渲染
      const Component = getComponent(React, Section, HelloWorld, Hello);
      setRenderedComponent(<Component />);
    } catch (error) {
      console.error('模板编译失败:', error);
      setRenderedComponent(<div>模板格式错误</div>);
    }
  }, [template]);

  return renderedComponent || <div>加载中...</div>;
};

// 使用示例
function App() {
  const templateString = `
  <Section>
    <div>
      <HelloWorld />
    </div>
    <Hello name="my name" />
  </Section>
  `;

  return <RenderReactTemplate template={templateString} />;
}

export default App;

注意事项： #

这种方式会执行动态生成的代码，如果模板来自不可信的外部来源，绝对不能用，存在XSS风险。但如果是自己可控的模板，这个方案的灵活性更高。

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