Question

我想写一个更高阶的组件，让我们说AddMarkup，它只有一个孩子。它应该将子项与生成它的代码一起呈现。例如：

<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插件。您需要编写代码，通过某些预定义的prop（插件设置）（例如childrenAsString）将代码作为字符串注入。

虽然这样可行，但它也会将您的代码绑定到Babel。尽管如此，如果你需要它并且你对这个问题感到满意，那就值得一试。

如何将JSX作为字符串？

1 个答案: