javascript - 未捕获的不变违规 : Target container is not a DOM element. - Reactjs

标签 javascript reactjs wordpress

此代码在本地运行时工作正常。当我在 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/

相关文章:

javascript - socket.io游戏开发算法

javascript:打印通过ajax接收到的文本

javascript - 查找reactjs中所有类型的组件

reactjs - fetch后在 react 组件中获取重复元素更多

javascript - 如何在 React CKEDITOR 中添加占位符

html - 如何使用 CSS 更改图标字体的颜色

javascript - 挖掘至最深的 .value 或 .content

wordpress - 如何从代码中调用 Wordpress Elementor Popup

php - 如何将 URL 参数插件与 Paypal 附加组件一起使用

javascript - 让JS部分更简单