React - 组件或拥有类似于 Chrome/Firefox JS 控制台的控制台的方法
React - component or a way to have a console that is similar Chrome/Firefox JS console
我正在开发需要在浏览器中执行一些 JavaScript 代码的 React 应用程序。它有一个代码编辑器（使用 Ace 编辑器），用户可以在其中输入一些代码，按 Run 按钮执行代码并在某些控制台中查看结果输出。
什么是好的 React "console" 组件或构建类似于 Chrome/Firefox JS 控制台的控制台的方法？
最天真的方法是通过 Javascript 中的原生 eval() 函数。我确信 Ace 提供了一些 API 来获取编辑器中的文本。从那里您需要做的就是将 eval(*yourEditorText*) 绑定到您的按钮并将其打印到屏幕上。
不过有一些注意事项。就像如果用户打印一个无限运行的 for 循环，你的页面就会崩溃。安全性也成为一个问题。阅读本文以了解有关使用 eval() How can I make external code 'safe' to run? Just ban eval()?
的效果的更多信息
编辑：如果你想在网页上打印控制台消息，你必须通过劫持 window.console 对象来做一些奇怪的事情，以获取日志消息，然后将其传递给你的 React 对象。正在努力 fiddle 来做到这一点。
EDIT2：制作了 fiddle：https://fiddle.jshell.net/julianljk/qsu5uzxk/
我正在开发需要在浏览器中执行一些 JavaScript 代码的 React 应用程序。它有一个代码编辑器（使用 Ace 编辑器），用户可以在其中输入一些代码，按 Run 按钮执行代码并在某些控制台中查看结果输出。
什么是好的 React "console" 组件或构建类似于 Chrome/Firefox JS 控制台的控制台的方法？
最天真的方法是通过 Javascript 中的原生 eval() 函数。我确信 Ace 提供了一些 API 来获取编辑器中的文本。从那里您需要做的就是将 eval(*yourEditorText*) 绑定到您的按钮并将其打印到屏幕上。
不过有一些注意事项。就像如果用户打印一个无限运行的 for 循环，你的页面就会崩溃。安全性也成为一个问题。阅读本文以了解有关使用 eval() How can I make external code 'safe' to run? Just ban eval()?
编辑：如果你想在网页上打印控制台消息，你必须通过劫持 window.console 对象来做一些奇怪的事情，以获取日志消息，然后将其传递给你的 React 对象。正在努力 fiddle 来做到这一点。
EDIT2：制作了 fiddle：https://fiddle.jshell.net/julianljk/qsu5uzxk/