reactjs - 有没有办法让 React 子组件显示为字符串，带有缩进、回车和 jsx 语法糖？

Question

我不确定我是否正确解释了我想要的内容。这是我正在尝试做的事情的示例:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class ExampleChild extends Component { 
  render() {
    return (
      <p>Hello!!</p>
    );
  }
}

class ExampleParent extends Component {
  render() {
    return (
      <div>
        <ExampleChild />
        Here's the ExampleChild code:
        {ExampleChild.toString()}
      </div>
    );
  }
}

ReactDOM.render(<ExampleParent />, document.getElementById('root'));

将以下输出获取到 DOM，其中包含实际代码的所有正确缩进和空格:

你好!这是示例子代码:

render() {
return ( < p >Hello!!< /p > ); }

如果子组件只是一个无状态的功能组件，我可以执行 .toString()，但它以纯 Javascript 形式返回它。它不会以 JSX 格式返回它，也不会使用原始返回和缩进。我也希望能够使用 React 类组件来做到这一点。是否有一个库可以做到这一点？

Answer 1

您可以使用 react-dom/server 中的 renderToStaticMarkup，但仅限于生成的 HTML 标记。

import React from "react";
import { render } from "react-dom";
import { renderToStaticMarkup } from "react-dom/server";
import Hello from "./Hello";

const App = () => (
  <div>
    <p>Component:</p>
    <Hello name="CodeSandbox" />
    <p>As HTML:</p>
    <pre>{renderToStaticMarkup(<Hello name="CodeSandbox" />)}</pre>
  </div>
);

render(<App />, document.getElementById("root"));

Check it out on CodeSandbox .

如果您想要整个 JSX 文件，您可以使用类似 raw-loader 的内容导入并在 pre 中打印它。