Wie Java Applet in reactjs zu verwenden

Question

Ich versuche, ein bestimmtes Java-Applet in meine reactjs-Anwendung zu integrieren. Darüber hinaus möchte ich es in einem Dialog (mit Matelial UI) ausführen lassen.

Ich habe eine Renderfunktion, die funktioniert und wenn ich auf eine bestimmte Schaltfläche klicke, wird der Dialog angezeigt. Der Code in Bezug auf das Applet Teil wird hier im Dialog meiner Rückkehr() Funktion gezeigt:

<Dialog 
     ref="dialogAction" 
     title={this.state.dialogTitle} 
     actions={customAction} 
     actionFocus="submit" 
     modal={this.state.modal} 
     autoDetectWindowHeight={true} 
     autoScrollBodyContent={true} 
     contentStyle={styles.dialogMarvin}> 

     <applet 
     type="application/x-java-applet;version=1.6" 
     width="540" 
     height="480" 
     codebase="./marvin" 
     archive="appletlaunch.jar" 
     code="chemaxon/marvin/applet/JMSketchLaunch" 
     legacy_lifecycle={true} 
     java-vm-args="-Djnlp.packEnabled=true -Xmx512m" 
     codebase_lookup={false}> 

     </applet> 

     </Dialog> 

Wenn ich diesen Code ausführen, wird der Dialog wie erwartet, und das erste Mal gezeigt, firefox mich fragen, ob ich will aktiviere Java (sag mir, dass es soweit funktioniert). Siehe folgendes Bild: applet ready to be loaded, but allowance asked

Aber sobald Java erlaubt ist, wird nichts angezeigt (nur leer, siehe folgendes Bild: once allowance granted). Wenn ich den Code im Browser überprüfe, fehlen einige Eigenschaften. Anstelle der ursprünglichen embeded Code habe ich diese ein (fehlende Archiv, Code-Basis und einige andere):

<applet 
    type="application/x-java-applet;version=1.6" 
    data-reactid=".0.$=12:0.0.2.2.0.$=10.0.1.0" 
    height="480" 
    width="540"> 
</applet> 

Einige inforamtions angezeigt werden, aber ich sie noch nicht verstehen.

Haben Sie schon versucht, ein Applet in Ihren reactjs zu verbuchen? Haben Sie ein paar Tipps zu geben? Ich mache etwas falsch ?

Answer 1

Reagieren ist wählerisch, wenn es um zufällige Attributnamen geht. Anstatt also applet mit JSX zu injizieren, setzen Sie stattdessen nur die innereHTML der Komponente. Um dies zu tun, verwenden Sie die Reaktion dangerouslySetInnerHTML:

var dangerousMarkup = { 
    __html: '<applet.... ' // the whole markup string you want to inject 
}; 

<div dangerouslySetInnerHTML={dangerousMarkup}></div> 

Dies ist im Grunde die gleiche wie Einstellung domNode.innerHTML = '<applet...' mit Vanille JavaScript und Reagieren lassen Sie ist die rohe Markup durchlaufen ohne Modifikation.

Docs: https://facebook.github.io/react/tips/dangerously-set-inner-html.html