java - 如何在reactjs中使用java小程序

Question

我正在尝试将特定的java小程序集成到我的reactjs应用程序中。 此外，我想让它在对话框中运行(使用 Material UI)。

我有一个可以运行的渲染函数，当我单击特定按钮时，会显示对话框。我的 return() 函数的对话框中有关小程序部分的代码如下所示:

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

当我运行此代码时，对话框按预期显示，并且第一次，firefox 询问我是否要激活 java(告诉我到目前为止它正在工作)。看下图:applet ready to be loaded, but allowance asked

但是一旦允许java，就不会显示任何内容(只有空白，请看下图: once allowance granted )。如果我在浏览器中检查代码，会发现缺少一些属性。我没有使用原始的嵌入代码(缺少存档、代码库和其他一些代码):

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

显示了一些信息，但我还不明白。

你已经尝试过在你的reactjs中嵌入一个小程序了吗？您有什么建议吗？我做错了什么吗？

Answer 1

React 在允许随机属性名称方面很挑剔。所以不要注入(inject)applet通过使用 JSX，只需设置组件的 innerHTML 即可。为此，请使用 React 的 dangerouslySetInnerHTML :

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

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

这与设置 domNode.innerHTML = '<applet...' 基本相同使用普通的 javascript，React 只是让原始标记不经修改地通过。

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