如何将 JSX 作为字符串获取？

Question

我想写一个高阶组件，比方说 AddMarkup，它有一个 child。它应该呈现 child 以及生成它的代码。例如：

<AddMarkup>
  <MyButton color="red">
    Red Button
  </MyButton>
</AddMarkup>

结果应该是这样的：

<div>
  <button style={{ color: 'red' }}>    /* Assume that MyButton is implemented this way */
    Red Button
  </button>
  <pre>
    <MyButton color="red">
      Red Button
    </MyButton>
  </pre>
</div>

我正在努力解决 <pre> 问题。有没有办法将原始 JSX 作为字符串获取（这样我就可以把它放在 <pre> 标签中）？有没有我可以应用的 Babel 或 Webpack 魔法？

Answer 1

可能解决这个问题的最好方法是编写一个依赖 jsx-to-string 来处理转换的自定义 Babel 插件。您需要编写代码，通过一些预定义的道具（插件设置）将代码作为字符串注入，例如 childrenAsString.

虽然这可行，但它也会将您的代码绑定到 Babel。尽管如此，如果您需要它并且对陷阱感到满意，那还是值得一试的。

如何将 JSX 作为字符串获取？

How do I get JSX as a string?

reactjs

webpack

react-jsx

babeljs