将保留空间的代码传递给docusaurus中的react组件

Question

我需要在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}/>

Answer 1

我最终选择了以下

<REPL>
```js
return 42;
```
</REPL>

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