将 Material UI 组件渲染为字符串答案

【问题标题】：Render Material UI component down to a string将 Material UI 组件渲染为字符串
【发布时间】：2021-05-06 13:53:51
【问题描述】：

我正在使用一个在浏览器中创建终端界面的包。我可以采用 HTML，我们需要显示 HTML。理想情况下，我们希望在这个 HTML 中显示一些 Material 组件。关键是为了使它起作用，它必须被喂入字符串。我能够找到一个名为jsx-to-string 的包，它在某种程度上可以工作。但是，当我尝试使用 Material UI 组件然后使用它来将其转换为字符串时，我会看到类似这样的内容...

<withstyles(forwardref(typography))>      Knowledge Check 1     </withstyles(forwardref(typography))>

在生产模式下尝试在浏览器中渲染时可能会出现问题？

我想知道是否有一种方法可以构建一些 JSX，包括 Material 组件甚至样式，然后将其提取到字符串中？到目前为止，我在尝试使其正常工作时遇到了一些麻烦，并且不确定如何在 Google 上进行搜索

【问题讨论】：

我可能误解了这个问题，但是如果您只需要将 React 代码呈现为字符串，您可以不使用 ReactDOM.render 吗？然后将输出字符串化？

标签： javascript reactjs material-ui

【解决方案1】：

您应该能够使用ReactDOM.render 方法将一些 React JSX 元素呈现为 HTML。

从那里，您可以使用innerHTML 以字符串形式获取 HTML 输出。

const rootElement = document.getElementById("root");

ReactDOM.render(
  <App />,
  rootElement
);

console.log(rootElement.innerHTML) // pass this value to the interface you are building.

您可以在这里找到一个简单的工作示例：https://codesandbox.io/s/infallible-paper-yh871?file=/src/index.js

【讨论】：