以 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 。