Javascript 以JSX形式返回动态字符串，呈现为导入的组件

假设我有一个进程动态地生成一些JSX，但它是一个文本字符串，在这种情况下，是否可以将其作为JSX返回，以呈现导入的组件、材质UI

使用下面的代码，我只能显示未设置样式的标记

import * as React from 'react';
import { Button } from '@material-ui/core';

export default class Testsp extends React.Component<ITestspProps, {}> {
  public render(): React.ReactElement<ITestspProps> {
    return <div dangerouslySetInnerHTML={this.someConvolutedProcess()} />
  }

  someConvolutedProcess() {
    let generatedJSX = '<Button color="primary">Hello World... Again</Button>';
    return {__html: generatedJSX};
  }
}

---

我知道我的方法很奇怪，但我有一个小案例，没有从字符串（字符串到JSX）生成JSX的内置选项

请注意，您实际上希望从字符串生成React元素（

React.createElement

）（因为只有JSX）

• DangerlySetinerHTML

  只接受HTML元素，不接受JSX

• ReactDOMServer

  用于将组件呈现为静态标记，即JSX到string，JSX到HTML

---

您可以通过启用@Babel/preset react的Babel管道传输JSX源代码字符串，并评估输出结果？如果内容来自用户输入，这显然是一个巨大的安全风险，但如果是您的内容，这可能会起作用。

ReactDOMServer.renderToStaticMarkup(element)