Question

我正在使用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

我在Internet上四处张望，但没有找到解决此问题的解决方案。你知道是什么原因造成的吗？

我放了<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;

Answer 1

能否请您检查一下您的主要component＃render函数是否正在返回一个DOM元素...（请尝试将所有返回的组件包装为一个

Answer 2

它告诉您找不到您所说的'sidebar'。按照惯例，除非您对index.html进行了调整，否则，如果使用public/index.html，则应放在create-react-app中；如果仍然使用npm init，则应调整到主根文件夹中。

除非您更改它，否则我敢打赌您的顶级div具有一个容器类：

<div class="container"></div>

那是一个非常好的位置，可用来渲染您的组件。在大多数React应用中，您会看到一个body标签和一个带有一类容器或应用的div。

您创建的所有组件最终都是这个container根元素的子代或嵌套在其中。因此，您需要像这样引用container：

ReactDOM.render(<Sidebar />, document.querySelector('.container'));

这就是说去找到div并在该div中渲染App组件。

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

2 个答案: