Question

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

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

这是我的项目结构：

enter image description here

这是我的 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>

[问题] 我可能在哪里犯了一个错误，因为乍一看的一切对我来说似乎都没问题，但我得到了空白页; /

Answer 1

您正在content div中呈现您的应用

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

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

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

Spring Boot（在reactjs中注入脚本）

1 个答案: