Fatal编程技术网
  • javascript/
  • Javascript 未从ReactJS渲染组件

Javascript 未从ReactJS渲染组件

javascript node.js reactjs express

Javascript 未从ReactJS渲染组件,javascript,node.js,reactjs,express,babeljs,Javascript,Node.js,Reactjs,Express,Babeljs,背景： 在我的论文中，我决定使用react将一个表加载到网页中，用户可以选择进入哪个房间。现在我正在使用SWIG（诱惑引擎）在页面加载时创建表格，但我意识到如果我使用React，更新它将是橡皮擦，然后重新构建它。（这也是学习react的一个很好的方法，因为我以后确实想使用它）。在我到达那里之前，我决定使用react，并选择使用babel渲染我的组件。忽略凌乱的代码，因为很多代码将在以后被整理和更改 问题: 文件根本没有加载。我首先按照教程安装了babel，然后使用上找到的代码将一些测试代码加载到

背景：

在我的论文中，我决定使用react将一个表加载到网页中，用户可以选择进入哪个房间。现在我正在使用SWIG（诱惑引擎）在页面加载时创建表格，但我意识到如果我使用React，更新它将是橡皮擦，然后重新构建它。（这也是学习react的一个很好的方法，因为我以后确实想使用它）。在我到达那里之前，我决定使用react，并选择使用babel渲染我的组件。忽略凌乱的代码，因为很多代码将在以后被整理和更改

问题:

文件根本没有加载。我首先按照教程安装了babel，然后使用上找到的代码将一些测试代码加载到名为
test.js
的文件中。然后我使用babel将其转换为jsx代码

正在查找该文件，因为它没有显示任何错误，但根本没有加载其内容。甚至
console.log（“此处”）
也没有输出到控制台

我的文件：

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>&nbsp;</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>

文件地址是，其中/board是我的
board.js
路由器文件的默认路由

如果需要任何文件，请说，我将很乐意提供。我已经为这件事紧张了一个星期了

提前感谢。

文件正在加载。因为
React.CreateComponent
不是函数，它必须是
React.createElement
，并且
render（）
方法中的
e
变量也没有定义，所以看不到
console.log（“此处”）

这是您的
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文档中的完整示例

如果您正开始学习我的建议使用，我无法真正将我的整个DIS转移到这一点。我只需要它来使用react创建两个表元素，一个在这里，另一个在别处。事实上，我一开始是为了玩react，但我在将它添加到现有应用程序时遇到了问题。不起作用。console.log（“此处”）仍没有打印出来，没有任何内容是使用文件结构和SWIG引擎对express应用程序进行的小设置。在浏览器部分，导航至，然后查看控制台 
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");
});