Question

在本地运行时，此代码可以正常工作。当我将其上传到000webhost并在WordPress页面中使用bundle.js的路径时，就会遇到此错误。没有_registerComponent，我收到上述错误。到处都有_registerComponent错误的解决方案。

我也将document.getElementById("app")的值设为空。

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>

Answer 1

由于您不在wordpress中使用index.html，因此您需要添加根容器div，以进行响应以呈现应用程序。尝试在wordpress html中为app添加div，例如<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>

Answer 2

在app.js中尝试

import React from 'react';
import ReactDOM from 'react-dom';
import Plans from "./components/Plans";
//Import CSS
import "./styles/styles.scss";

const App = () => (
  <div>
  <Plans/>
  </div>
 );
  ReactDOM.hydrate(
  <App />,
  document.getElementById('app')
  );

Answer 3

您的变量“ app”未定义。试试这个

render(<App />, document.getElementById('app'));

未捕获的不变违规：目标容器不是DOM元素。-React.js

3 个答案: