reactjs – 如何将JSX作为字符串？

2023年9月10日 526次阅读

我想写一个更高阶的组件,比如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魔法吗？

最佳答案 可能最好的解决方法是编写一个依赖于
jsx-to-string来处理转换的自定义Babel插件.您需要编写代码,通过一些预定义的prop(插件设置)(如childrenAsString)将代码作为字符串注入.

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

点赞