如何在ReactJS中使用Java Applet

Question

我正在嘗試在我的reactjs應用程序中集成一個特定的Java小程序。 而且，我想使其在對話框中運行（使用材質UI）。

我有一個可以使用的渲染功能，當我單擊特定按鈕時，將顯示對話框。 我的return（）函數對話框中有關applet部分的代碼如下所示：

<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（告訴我到目前為止它正在工作）。 觀看下圖： 准備加載小程序，但要求津貼

但是，一旦允許使用Java，就不會顯示任何內容（只有空白，請看下面的圖像： 一旦授予了許可 ）。 如果我在瀏覽器中檢查代碼，則缺少某些屬性。 而不是原始的嵌入代碼，我有了這個代碼（缺少歸檔文件，代碼庫和其他代碼）：

<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很挑剔。 因此，與其使用JSX注入applet ，不如設置該組件的innerHTML。 為此，請使用React的dangerouslySetInnerHTML SetInnerHTML：

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

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

這基本上與使用普通javascript設置domNode.innerHTML = '<applet...'相同，React只是讓原始標記通過而無需修改。

文件： https ： //facebook.github.io/react/tips/dangerously-set-inner-html.html