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

Question

我想要的是能够在加载页面而不重新加载页面后从react组件呈现HTML。

我有一个从struts2动作加载的父JSP，我们计划在其中集成ReactJS作为完成客户端UI的路线图。这是Child 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);
});

现在，争论的焦点是，我可以看到源和网络Tab（Chrome）中加载的源，但没有渲染任何组件，甚至不像示例JSX中的const对象。

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

1. 尝试了在子JSP中加载Sources的所有可能组合。
2. 在文档准备好之后尝试加载JSX - 这里没有运气。
3. 尝试ES6 / babel，text / babel，js / babel等所有这样的组合 - 当类型为text / js时抛出意外的'<'。

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

我计划使用React V15。

Answer 1

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

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