react中的目標容器不是DOM元素

Question

React 無法通過容器 DOM 來渲染 JSX。 到目前為止，Stackoverflow 上的類似問題還沒有解決方案。 此類問題的大多數答案都是針對舊版本的 react。

index.html中的script標簽在容器之后，這意味着錯誤不是將標簽放在容器之前引起的。 在網上的一個類似問題中，一位用戶說問題可能是因為 webpack 配置。 我不知道在 webpack 配置文件中要更改什么。

我正在使用反應版本 6.4.1

HTML 文件：

<!-- load django static files -->
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Storelead CRM</title>

    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/cosmo/bootstrap.min.css" rel="stylesheet" integrity="sha384-qdQEsAI45WFCO5QwXBelBe1rR9Nwiss4rGEqiszC+9olH1ScrLrMQr1KmDR964uZ" crossorigin="anonymous">

     <!-- Custom fonts for this template-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">

    <!-- Custom stysheet -->
    <link rel="stylesheet" href="{% static "frontend/css/sb-admin.css" %}">

    <style>
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box !important;
        }

        .dropdown-toggle::after {
            display: none !important;
        }

        .dropdown-menu {
            left: -150% !important;
        }
    </style>
</head>
<body id="page-top">

    <!-- React -->
    <div id="wrapper" class="app"></div>

     <!-- React script -->
    <script src="{% static "frontend/js/main.js" %}"></script>

    <!-- Boostrap script -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <!-- Custom scripts for all pages-->
  <script src="{% static "frontend/js/sb-admin.js" %}"></script>
</body>
</html>

反應文件：

應用程序.js

import React, {useState} from 'react';
import {Provider} from 'react-redux';

import Dashboard from './leads/Dashboard';
import Home from './Home';

import store from '../store'

function App() {
    return (
        <Provider store={store}>
            <div className="container-fluid">
        <Home/>
      </div>
        </Provider>
    );
}

export default App;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/App';

const container = document.querySelector('app');

ReactDOM.render(<App />, container);

Webpack 配置：

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    }
}

Answer 1

嘗試使用document.querySelector('.app')而不是document.querySelector('app');

react中的目標容器不是DOM元素

問題描述

HTML 文件：

反應文件：

應用程序.js

索引.js

Webpack 配置：

1 個解決方案

解決方案1
0 2020-04-24 11:17:00

react中的目標容器不是DOM元素

問題描述

HTML 文件：

反應文件：

應用程序.js

索引.js

Webpack 配置：

1 個解決方案

解決方案1 0 2020-04-24 11:17:00

解決方案1
0 2020-04-24 11:17:00