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

React无法细化容器DOM来渲染JSX。到目前为止,Stackoverflow上还没有类似问题的解决方案。这类问题的大部分答案都是针对老版本的react。

script 签入 index.html 是在容器之后,这意味着错误不是因为将标签放在容器之前造成的。在网上一个类似的问题中,有用户说可能是因为webpack配置的问题。我不知道该怎么修改webpack配置文件。

我使用的是6.4.1版本的react。

HTML FILE。

<!-- 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>

REACT FILES:

App.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"
                }
            }
        ]
    }
}

解决方案:

尝试使用 document.querySelector('.app') 而不是 document.querySelector('app');

给TA打赏
共{{data.count}}人
人已打赏
未分类

将对象从父体发射到子体

2022-9-9 1:06:21

未分类

如何从文本文件中删除包含特定元素的一行C#。

2022-9-9 1:06:23

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索