javascript - React - laravel - 未捕获的错误：目标容器不是 DOM 元素

问题描述

我使用 React 作为我的 laravel 项目的前端。我的 React 组件按预期呈现，但我在 chrome devtool 控制台中不断收到此错误：

Uncaught Error: Target container is not a DOM element.
  at invariant (app.js:38102)
  at legacyRenderSubtreeIntoContainer (app.js:56749)
  at Object.render (app.js:56830)
  at Object.<anonymous> (app.js:58393)
  at __webpack_require__ (app.js:20)
  at Object.<anonymous> (app.js:13977)
  at __webpack_require__ (app.js:20)
  at Object.<anonymous> (app.js:13951)
  at __webpack_require__ (app.js:20)
  at app.js:63

我查看了整个互联网，但没有找到解决此问题的解决方案。你知道这是什么原因吗？

我把我<script type="text/javascript" src="{{ asset('js/app.js') }}"></script> 的放在结束</body>标签之前。

这是我的 Sidebar.js 组件：

import React, {Component} from 'react';
import ReactDOM from 'react-dom'

const Sidebar = () => (
<div className="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
    <div className="logo">
        <a href="http://www.creative-tim.com" className="simple-text logo-normal">
        Creative Tim
        </a>
    </div>
    <div className="sidebar-wrapper">
        <ul className="nav">
        <li className="nav-item active  ">
            <a className="nav-link" href="./dashboard.html">
            <i className="material-icons">dashboard</i>
            <p>Dashboard</p>
            </a>
        </li>
        <li className="nav-item ">
            <a className="nav-link" href="./user.html">
            <i className="material-icons">person</i>
            <p>User Profile</p>
            </a>
        </li>
        <li className="nav-item ">
            <a className="nav-link" href="./tables.html">
            <i className="material-icons">content_paste</i>
            <p>Table List</p>
            </a>
        </li>
        <li className="nav-item ">
            <a className="nav-link" href="./typography.html">
            <i className="material-icons">library_books</i>
            <p>Typography</p>
            </a>
        </li>
        <li className="nav-item ">
            <a className="nav-link" href="./icons.html">
            <i className="material-icons">bubble_chart</i>
            <p>Icons</p>
            </a>
        </li>
        <li className="nav-item ">
            <a className="nav-link" href="./map.html">
            <i className="material-icons">location_ons</i>
            <p>Maps</p>
            </a>
        </li>
        <li className="nav-item ">
            <a className="nav-link" href="./notifications.html">
            <i className="material-icons">notifications</i>
            <p>Notifications</p>
            </a>
        </li>
        <li className="nav-item ">
            <a className="nav-link" href="./rtl.html">
            <i className="material-icons">language</i>
            <p>RTL Support</p>
            </a>
        </li>
        </ul>
    </div>
</div>
    )

if(document.getElementById('sidebar')) {
    ReactDOM.render(<Sidebar />, document.getElementById('sidebar'))
}

export default Sidebar;

标签： javascriptreactjslaravelwebpacklaravel-mix

javascript - React - laravel - 未捕获的错误：目标容器不是 DOM 元素

问题描述

解决方案

推荐阅读