Spring Boot（在 reactjs 中注入脚本）答案

【问题标题】：Spring Boot (inject script in reactjs)Spring Boot（在 reactjs 中注入脚本）
【发布时间】：2017-09-04 17:01:05
【问题描述】：

我很难弄清楚我可能会做错什么，因为可能大多数场景都已经过测试。

我正在使用 Spring Boot 和 ReactJS 为前端编写 Web 应用程序。我现在正在尝试编写简单的脚本，显示一些从单独的文件导入到 html 的纯文本。这样做之后，我最终什么都没有出现。

这是我的项目结构：

这是我的 app.js，我在其中定义了我的组件：

var CommentBox = React.createClass({
render: function() {
    return (
        <div className="commentBox">
            Hello, world! I am a CommentBox.
        </div>
    );
}
});
   ReactDOM.render(<CommentBox />, document.getElementById('content')
);

下面是 cardists.html 页面：

<!DOCTYPE html>
<html>
<head>
<title>Cardists</title>
   <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/
    3.3.7/css/bootstrap.min.css"/>
</head>
<body>

   <div id='root'></div>
      <script src="react-15.0.1.js"></script>
      <script src="react-dom-15.0.1.js"></script>
      <script src="cdnjs.cloudflare.com/ajax/libs/babel-
       core/5.8.23/browser.min.js"></script>

      <script type="text/babel" src="../public/js/app.js"></script>

</body>
</html>

[问题] 我可能在哪里犯了错误，因为乍一看似乎一切正常，但我得到的是空白页；/

【问题讨论】：

标签： javascript spring reactjs spring-boot

【解决方案1】：

你在content div 中渲染你的应用程序

ReactDOM.render(<CommentBox />, document.getElementById('content')

但是在你的 html 文件中没有带有content id 的 div。有一个 id 为 root 的 div，因此您需要在该 div 中呈现您的组件，例如

ReactDOM.render(<CommentBox />, document.getElementById('root')

【讨论】：