Реакция - laravel - Uncaught Error: целевой контейнер не является элементом DOM - PullRequest
Новая
       6

Реакция - laravel - Uncaught Error: целевой контейнер не является элементом DOM

0 голосов
/ 25 октября 2018

Я использую 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;

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Это говорит вам, что он не может найти то 'sidebar', о котором вы говорите.Обычно, если вы не настроили ваш index.html, который должен быть в вашем public/index.html, если вы используете create-react-app, или в основной корневой папке, если вы все еще используете npm init.

.ставка, если вы ее не изменили, имеет класс контейнера: 

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

Это действительно хорошее место для визуализации вашего компонента.В большинстве приложений React вы увидите это, тег body и div с классом контейнера или, возможно, приложения.

Все компоненты, которые вы создаете, в конечном итоге являются дочерними или вложенными внутри этого самого корня container элемент.Итак, вам нужно сослаться на container примерно так: 

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

Итак, это говорит о том, что найдите div и визуализируйте компонент App внутри этого div.

0 голосов
/ 25 октября 2018

Можете ли вы проверить, что функция рендеринга вашего основного компонента # возвращает один элемент DOM ... (попробуйте обернуть все возвращаемые компоненты в один

...