React - Komponente oder eine Möglichkeit, eine Konsole zu haben, die ähnlich ist Chrome/Firefox JS-Konsole

Question

Ich arbeite an React-Anwendung, die einige JavaScript-Code im Browser ausführen benötigt. Es hat einen Code-Editor (mit Ace-Editor), wo Benutzer Code eingeben können, drücken Sie Run Schaltfläche, um den Code auszuführen und sehen Sie die Ergebnisse in einigen Konsolen ausgegeben.
Was wäre eine gute React "Konsole" -Komponente oder eine Möglichkeit, eine Konsole ähnlich der Chrome/Firefox JS Konsole zu bauen?

Answer 1

Die meisten Naive Weg es zu tun ist über die native eval() Funktion in Javascript. Ich bin sicher, Ace bietet eine API, um den Text im Editor zu bekommen. Von dort müssen Sie nur einen eval(*yourEditorText*) an Ihren Knopf binden und ihn auf den Bildschirm drucken.

Es gibt einige Vorbehalte mit diesem tho. Wie wenn ein Benutzer eine For-Schleife druckt, die unendlich läuft, stürzt Ihre Seite ab. Sicherheit wird auch ein Anliegen. Lesen Sie diese mehr über die Auswirkungen zu verstehen, der mit eval()How can I make external code 'safe' to run? Just ban eval()?

EDIT: Wenn Sie Konsolenmeldungen drucken möchten auf der Webseite, müssen Sie mit Hijacking die window.console Objekt einige seltsame Dinge zu tun, die Log-Meldungen zu erhalten und dann Übergeben Sie es an Ihr React-Objekt. Versuche, an einer Geige zu arbeiten, um das zu tun.

EDIT2: Aus der Geige: https://fiddle.jshell.net/julianljk/qsu5uzxk/