Question

我似乎找不到这个问题的答案。

这里要清楚的是我的ReactJS主要代码：

import React from "react";
import ReactDom from "react-dom";
import Page from "../components/MainPage";
import LoginPage from "../components/LoginPage";

ReactDom.render(<Page />, document.getElementById('MainPageTopBar'));
ReactDom.render(<LoginPage />, document.getElementById('app'));

这是我的索引：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Placeholder</title>
    <link rel="stylesheet" href="src/style/entry/main.css">
</head>
<body class="body">
<div id="MainPageTopBar">
</div>
<script type="text/javascript" src="dist/main.js"></script>
</body>
</html>

这是我的登录页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Placeholder</title>
    <link rel="stylesheet" href="src/style/entry/main.css">
</head>
<body class="body">
<div id="app">

</div>
<script type="text/javascript" src="dist/main.js"></script>
</body>
</html>

我想要的是第一个ReactDOM.render呈现索引，它做了。我也希望第二个呈现自己的页面，登录页面更精确。似乎没有出现webpack的错误，但我在浏览器的控制台上收到此错误：“目标容器不是DOM元素”。虽然我不认为这是问题所以我使用Chrome 这是LoginPage文件：

import React from "react";

class LoginPage extends React.Component {
    render() {
        return(
            <div>
                doesn t matter
            </div>
        );
    }
}
export default LoginPage;

我认为问题出在main.js.有人可以告诉我我的代码有什么问题并向我提供解决方案吗？

如何在多个页面上使用相同的ReactJS脚本

0 个答案: