0

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

<REPL>
return 42;
</REPL>

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

<REPL code="return 42;"/>

后一种方法有效，但代码可以是多行并且可以有缩进。在没有保留换行符和空格的情况下收到 code 道具。如何解决这个问题？

尽管第二种方法似乎有效，但感觉并不自然。我在尝试上面的第一种方法时遇到的问题是，如果代码包含类似const { x } = obj;作为子组件的代码首先由 mdx 解释，它会尝试评估{ x }并说找不到变量。另外，我必须将 props.children 渲染到一个 dom，然后从那里提取文本，这似乎是不必要的。那么，将任意代码作为字符串传递给子反应组件的最佳方法是什么？

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

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

<REPL code={example}/>
4

1 回答 1

0

我终于解决了以下问题

<REPL>

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

</REPL>

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

于 2021-04-29T23:33:42.573 回答