将 React 组件转换为 HTML 字符串（导出到文件）

Question

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

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

我想在它上面运行一个 function 得到文字字符串"<div> <h1>Some content</h1> </div>"

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

Answer 1

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

const SomeComponent = () => {
  return (
    <div>
      <h1>Some content</h1>
    </div>
  );
};

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

Answer 2

解决此类问题的一般方法是对 function 使用.toString() ，然后从那里解析您需要的内容。

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

为了克服这个问题，我建议为您的转译器开发一个插件，该插件在转译过程中存储 function 内容。 例如，您可以在那里写fn.jsx = 'jsx as string' 。

为了提供更准确的解决方案，我必须知道您使用的是哪个转译器，因为它们每个都带有自己的 API。