React - 组件或具有类似Chrome / Firefox JS控制台的控制台的方法

Question

我正在研究需要在浏览器中执行一些JavaScript代码的React应用程序。它有一个代码编辑器（使用Ace编辑器），用户可以输入一些代码，按Run按钮执行代码并在某些控制台中查看结果输出。
什么是一个好的React“控制台”组件或构建类似于Chrome / Firefox JS控制台的控制台的方法？

Answer 1

最强 的方式是通过Javascript中的原生eval()函数。我确定Ace提供了一些API来获取编辑器中的文本。从那里你需要做的就是将eval(*yourEditorText*)绑定到你的按钮并将其打印到屏幕上。

有一些警告。就像用户打印无限运行的for循环一样，您的页面会崩溃。安全也成为一个问题。阅读本文以了解有关使用eval() How can I make external code 'safe' to run? Just ban eval()?

的效果的更多信息

编辑：如果你想在网页上打印控制台消息，你必须做一些奇怪的事情，劫持window.console对象，获取日志消息，然后将其传递给你的React对象。试着努力做到这一点。

EDIT2：制作小提琴：https://fiddle.jshell.net/julianljk/qsu5uzxk/