将 React 组件集成/注入到静态（加载）HTML答案

【问题标题】：Integrate/ Inject React Component into Static(loaded) HTML将 React 组件集成/注入到静态（加载）HTML
【发布时间】：2018-06-08 16:58:52
【问题描述】：

我想要的是能够在页面加载后从反应组件呈现 HTML 而无需重新加载。

我有一个从 struts2 动作加载的父 JSP，我们计划在其中集成 ReactJS 作为路线图以完成客户端 UI。这是子 JSP。

<div id="app"></div><!-- load the component here-->
<script src='./react.js'></script>
<script src='./react-dom.js'></script>
<script src='./browser.min.js'></script><!-- transpiles the JSX code -->
<script type="text/Babel" src='./myReactComponent.js' /><!-- JSX -->

示例 JSX

import React from 'react';
import ReactDOM from 'react-dom';
const hello = <h1>Hello</h1>;
ReactDOM.render(hello, document.getElementById('app'));

父 JSP 执行 Ajax 调用以获取包含上述代码的 JSP，如下所示。

<div id="someDiv"></div>
$('button').click({
// do an ajax call and fetch 'data'(JSP)
$('#someDiv').html(data);
});

现在，争论的焦点是，我可以在源和网络选项卡 (Chrome) 中看到正在加载的源，但没有呈现任何组件，甚至没有像示例 JSX 中的 const 对象。

在此处发布查询之前，我尝试了以下操作

尝试了在子 JSP 中加载源的所有可能组合。
在文档准备好后尝试加载 JSX - 没有运气。
尝试了 ES6/babel、text/babel、js/babel 等所有此类组合 - 当类型为 text/js 时会抛出意外的“

我想知道这是否是将像 struts2 这样的服务器端堆栈迁移到客户端堆栈的正确方法。附言我们有一个非常大的 Struts + Spring 实现，并且将代码全部移动到 SPA 将是艰巨的。

我打算使用 React V15。

【问题讨论】：

标签： javascript reactjs jsp struts2 server-side-rendering

【解决方案1】：

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

它必须是“text/babel”而不是“text/babel”

【讨论】：

已经尝试了第 3 点中提到的所有这些组合。不会抛出任何错误，但也不起作用。