传递空间保留代码以在 docusaurus 中反应组件

问题描述

我需要在 docusaurus 中使用自定义代码编辑器。我正在尝试组合一个 react 组件，以便我可以在 mdx 文档中使用以下语法。

<REPL>
return 42;
</REPL>

我在完成这项工作时遇到了问题（我将在下面解释），然后我尝试了

<REPL code="return 42;"/>

后一种方法有效，但代码可以是多行并且可以有缩进。接收代码道具时不保留换行符和空格。如何解决这个问题？

虽然第二种方法似乎有效，但感觉并不自然。我在尝试上述第一种方法时遇到的问题是，如果代码包含类似 const { x } = obj; 的内容，则作为子组件的代码首先由 mdx 解释，并尝试评估 { x } 并表示该变量不是成立。此外，我不得不将 props.children 渲染到一个 dom，然后从那里提取文本，这似乎是不必要的。 那么，将任意代码作为字符串传递给作为子级的 react 组件的最佳方法是什么？

我目前有第三种工作方法，它更加冗长。这是

export example = `return
42; // can be multiple lines and indentation
`

<REPL code={example}/>

解决方法

我终于解决了以下问题

<REPL>

\`\`\`js
return 42;
\`\`\`

</REPL>

\' 上面应该没有 \ 并且应该在代码周围有一个换行符以避免被评估的代码，我认为这是 MDX 的限制。