如何解决传递空间保留代码以在 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 的限制。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。