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

Question

假设我有一些动态生成一些 JSX 但作为文字字符串的进程，是否可以将其返回为呈现导入组件的 JSX，在这种情况下为 Material 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，而不是字符串

ReactDOMServer.renderToStaticMarkup(element)

我知道我的方法很奇怪，但我有一个小众案例

Answer 1

没有内置选项可以从字符串（字符串到 JSX）生成 JSX。

请注意，您实际上想从字符串生成 React 元素（ React.createElement ）（因为 JSX 只是语法糖）

• dangerouslySetInnerHTML只接受 HTML 元素，不接受 JSX 。
• ReactDOMServer用于将组件渲染为 static 标记，即JSX-to-string ， JSX-to-HTML 。