上下文：
在我的论文中，我决定使用react将表加载到网页中，用户可以在其中选择要进入的房间。现在，我正在使用SWIG（诱人引擎）在加载页面时制作表格，但是我意识到，如果我使用React，则对其进行更新将是橡皮擦，然后将其重新构建。 （这也是学习反应的好方法，因为我以后想使用它）。在到达那里之前，我决定尝试一下react，并选择使用babel渲染我的组件。忽略混乱的代码，因为很多代码将在以后整理和更改。
问题：
该文件根本没有加载。我首先按照this教程安装babel，然后使用the reactjs tutorial page上的代码将一些测试代码加载到名为test.js的文件中。然后，我使用babel将其转换为jsx代码。
正在查找文件，因为它没有显示任何错误，但是根本没有加载其内容。甚至console.log("here")都没有输出到控制台。
我的文件：
roomChoose.html：
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Choose a room to play!</title>
<script
type="text/javascript"
src="../../javascript/roomChooseComponents/roomChooseFunctions.js"
></script>
<script
type="text/javascript"
src="../../javascript/lib/jquery.js"
></script>
<link rel="stylesheet" href="../css/roomChoose.css" />
<script
type="text/javascript"
src="../../javascript/roomChooseComponents/askForPass.js"
></script>
<script src="../socket.io/socket.io.js"></script>
<script>
$(document).ready(function() {
document.getElementById("roomPass").readOnly = true;
});
const socket = io.connect();
socket.on("connect", () => {
let obj = {
room: "roomChoose",
name: "undecided"
};
socket.emit("room", obj);
});
</script>
</head>
<body>
<div id="like_button_container"></div>
<div class="roomTableDiv" id="roomTableDiv">
{% if rooms.length == 0%}
<p>No public rooms! Why dont you make one?</p>
{%else%}
<p>Public rooms:</p>
<table id="roomTable">
<tr>
<th> </th>
<th>Room Name</th>
<th>Player Number</th>
<th>State</th>
</tr>
<tbody id="#roomTabletbodyID">
{% for r in rooms %} {% if r.roomName != "generalChat" &&
r.playerNumber < 4 && r.roomName != "roomChoose" %}
<tr>
{%if r.roomPassword != null %}
<td>
<button onclick="askForPassword('{{r.roomName}}',true)">
Join
</button>
</td>
{% else %}
<td>
<button onclick="askForPassword('{{r.roomName}}',false)">
Join
</button>
</td>
{% endif %}
<td>"{{r.roomName}}"</td>
<td>{{r.playerNumber}}/4</td>
{%if r.roomPassword != null %}
<td>
Private
</td>
{% else %}
<td>
Public
</td>
{% endif %}
</tr>
{% endif %} {% endfor %}
</tbody>
</table>
<p>
Alternatively, you can create your own room here and make it private:
</p>
{%endif%}
</div>
<div class="cont">
<form
action="/board/createNew"
method="post"
id="roomCreate"
onsubmit="return checkForm(this)"
>
<input
type="checkbox"
name="private"
id="private"
onclick="hideShowPasswordFeild(this)"
/>Private room? <br />
Roomname:
<input type="text" name="roomName" id="roomName" />
<div class="roomPasswordDiv" id="roomPasswordDiv">
Password:
<input type="text" name="roomPass" id="roomPass" />
</div>
<button type="submit">Create room</button>
</form>
</div>
<script
src="https://unpkg.com/react@16/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
crossorigin
></script>
<!-- Load our React component. -->
<!-- <script src="../../javascript/roomChooseComponents/components/chooseRoomTable.js"></script> -->
<script type="javascript/text" src="/html/board/test.js"></script>
</body>
</html>
test.js
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return "You liked this.";
}
return e(
"button",
{ onClick: () => this.setState({ liked: true }) },
"Like"
);
}
}
$(document).ready(() => {
const domContainer = document.querySelector("#like_button_container");
ReactDOM.render(React.CreateComponent(LikeButton), domContainer);
console.log("here");
});
文件地址为http://localhost:3000/board，其中/ board是我的board.js路由器文件的默认路由。
如果需要任何文件，请说出来，我们将很乐意提供。我已经为此强调了一个星期。
提前感谢。
文件正在加载。您看不到console.log("here")，因为React.CreateComponent不是函数，它必须是React.createElement，并且e方法中的render()变量也未定义。
这里是您的test.js
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
$(document).ready(() => {
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
console.log("here");
});
请参阅react文档here中的完整示例