将React组件转换为HTML字符串(导出到文件)

Question

我想在导出为字符串的React组件的return语句中获取值。所以如果我有一个组件

function SomeComponent() {
return (
<div>
<h1>Some content</h1>
</div>
)

我想在上面运行一个函数，获取文本字符串"<div> <h1>Some content</h1> </div>"

导出到另一个文件。这可能吗？

Answer 1

您可以使用ReactDOMServer.renderToString。要执行此操作，请先执行import ReactDOMServer from "react-dom/server;，然后将SomeComponent作为参数传递给函数。最后，将它像任何其他语句一样导出，使其在其他文件中可用。

const SomeComponent = () => {
return (
<div>
<h1>Some content</h1>
</div>
);
};
export const SomeComponentAsString = ReactDOMServer.renderToString(
<SomeComponent />
);
// <div><h1>Some content</h1></div>

Answer 2

解决这类问题的一般方法是对函数使用.toString()，然后从中解析所需内容。

在这种情况下，问题是给定它是JSX，代码在运行之前需要进行转换。在这个过程中，JSX标记将被转换为函数调用，因此它会丢失您需要的信息。

为了克服这个问题，我建议为你的transpiler开发一个插件，在transpillar过程中存储函数内容。例如，您可以在那里编写fn.jsx = 'jsx as string'。

为了给出更准确的解决方案，我必须知道你使用的是哪台转发器，因为每台转发器都有自己的API。