此代码在本地运行时工作正常。当我在 000webhost 上传此内容时并在WordPress页面中使用bundle.js的路径,然后遇到此错误。
我在没有 _registerComponent
的情况下收到上述错误。任何地方都有 _registerComponent
错误的解决方案。
此外,我将 document.getElementById("app")
的值设置为 null。
app.js
import React from "../node_modules/react/index";
import { render } from "../node_modules/react-dom/index";
import Plans from "./components/Plans";
//Import CSS
import "./styles/styles.scss";
const App = () => (
<div>
<Plans/>
</div>
);
var app = document.getElementById("app");
console.log("app",document.getElementById("app"))
render(<App/>, app);
index.html
<!DOCTYPE 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>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
Code used in WordPress
<html>
<head>
</head>
<body>
<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>
<script async src="https://unvisitable-bows.000webhostapp.com/react-widget-subscription-plans/react-widget-subscription-plans/public/bundle.js" crossorigin></script>
</body>
</html>
最佳答案
因为您没有使用index.html
在 WordPress 中,您需要添加根容器 div 以便 React 用来渲染您的应用程序。尝试为 app
添加 div在 WordPress html 中,即 <div id="app"></div>
<html>
<head>
</head>
<body>
<div id="app"></div>
<script async src="https://unvisitable-bows.000webhostapp.com/react-widget-subscription-plans/react-widget-subscription-plans/public/bundle.js" crossorigin></script>
</body>
</html>
关于javascript - 未捕获的不变违规 : Target container is not a DOM element. - Reactjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58021968/