How to use java applet in reactjs

Question

I'm trying to integrate a specific java applet in my reactjs application. More over, I would like to make it run in a Dialog (using matelial UI).

I have a render function which works and when I click on a specific button, the Dialog is shown. The code concerning the applet part in the Dialog of my return() function is shown here :

<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>

When I run this code, the Dialog is shown as expected and the first time, firefox ask me if I want to activate java (telling me that it's working so far). Watch the following picture: applet ready to be loaded, but allowance asked

But once java allowed, nothing is displayed (only blank, look the following image: once allowance granted ). If I check the code in the brower, some properties are missing. Instead of the original embeded code I have this one (missing archive, codebase and some other) :

<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>

Some inforamtions are displayed but I don't understand them yet.

Have you arleady try to emmbed an applet in your reactjs ? Have you some tips to give ? I'm doing something wrong ?

Answer 1

React is picky when it comes to allowing random attribute names. So instead of injecting applet by using JSX, just set the innerHTML of the component instead. To do this, use React's dangerouslySetInnerHTML :

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

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

This is basically the same as setting domNode.innerHTML = '<applet...' with vanilla javascript, and React just let's the raw markup pass through without modification.

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