React не распознает загрузочную модальную ошибку «Навбар не определен» - PullRequest
Новая
       34

React не распознает загрузочную модальную ошибку «Навбар не определен»

0 голосов
/ 12 ноября 2018

Я пытаюсь добавить Navbar в мое реактивное приложение, используя модал Bootstrap, я установил его так, как предлагалось в их документе: npm install --save response-bootstrap.

Структура моего проекта:

ProjectRootFolder / src / app.js (файл отобразит мою главную страницу)

ProjectRootFolder / src / index.html (где будет отображаться страница)

Вот код: 

/* now built everything as React Component */
class Header extends React.Component{
    render(){
        return <h3>Header Content</h3>;
    }
}
const navJSX = (
    <Navbar>
        <Navbar.Header>
            <Navbar.Brand>
            <a href="#home">React-Bootstrap</a>
            </Navbar.Brand>
        </Navbar.Header>
        <Nav>
            <NavItem eventKey={1} href="#">
            Link
            </NavItem>
            <NavItem eventKey={2} href="#">
            Link
            </NavItem>
            <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
            <MenuItem eventKey={3.1}>Action</MenuItem>
            <MenuItem eventKey={3.2}>Another action</MenuItem>
            <MenuItem eventKey={3.3}>Something else here</MenuItem>
            <MenuItem divider />
            <MenuItem eventKey={3.4}>Separated link</MenuItem>
            </NavDropdown>
        </Nav>
    </Navbar>
    );


class NavComp extends React.Component{
    render(){
        return navJSX;
    }
}

const jsx = (
    <div>
        <h1>Title Content</h1>
        <NavComp/>
        <Header/>
    </div>
);

ReactDOM.render(jsx, document.getElementById('app'));

index.html: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="https://icons8.com/icon/684/cool">
    <!--link rel="stylesheet" type="text/css" media="screen" href="main.css" /-->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!--script src="main.js"></script-->
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
    <script src="/scripts/app.js"></script>
</body>
</html>

Я использую babel для переноса моего JSX в понятный браузеру код JavaScript, это расшифровка, созданная babel: 

"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/* now built everything as React Component */
var Header = function (_React$Component) {
    _inherits(Header, _React$Component);

    function Header() {
        _classCallCheck(this, Header);

        return _possibleConstructorReturn(this, (Header.__proto__ || Object.getPrototypeOf(Header)).apply(this, arguments));
    }

    _createClass(Header, [{
        key: "render",
        value: function render() {
            return React.createElement(
                "h3",
                null,
                "Header Content"
            );
        }
    }]);

    return Header;
}(React.Component);

var navJSX = React.createElement(
    Navbar,
    null,
    React.createElement(
        Navbar.Header,
        null,
        React.createElement(
            Navbar.Brand,
            null,
            React.createElement(
                "a",
                { href: "#home" },
                "React-Bootstrap"
            )
        )
    ),
    React.createElement(
        Nav,
        null,
        React.createElement(
            NavItem,
            { eventKey: 1, href: "#" },
            "Link"
        ),
        React.createElement(
            NavItem,
            { eventKey: 2, href: "#" },
            "Link"
        ),
        React.createElement(
            NavDropdown,
            { eventKey: 3, title: "Dropdown", id: "basic-nav-dropdown" },
            React.createElement(
                MenuItem,
                { eventKey: 3.1 },
                "Action"
            ),
            React.createElement(
                MenuItem,
                { eventKey: 3.2 },
                "Another action"
            ),
            React.createElement(
                MenuItem,
                { eventKey: 3.3 },
                "Something else here"
            ),
            React.createElement(MenuItem, { divider: true }),
            React.createElement(
                MenuItem,
                { eventKey: 3.4 },
                "Separated link"
            )
        )
    )
);

var NavComp = function (_React$Component2) {
    _inherits(NavComp, _React$Component2);

    function NavComp() {
        _classCallCheck(this, NavComp);

        return _possibleConstructorReturn(this, (NavComp.__proto__ || Object.getPrototypeOf(NavComp)).apply(this, arguments));
    }

    _createClass(NavComp, [{
        key: "render",
        value: function render() {
            return navJSX;
        }
    }]);

    return NavComp;
}(React.Component);

var jsx = React.createElement(
    "div",
    null,
    React.createElement(
        "h1",
        null,
        "Title Content"
    ),
    React.createElement(NavComp, null),
    React.createElement(Header, null)
);

ReactDOM.render(jsx, document.getElementById('app'));

NavBar не отображается, и в консоли есть ошибка: Навбар не определен в app.js: 36

Строка 36 в app.js: Navbar в файле стенограммы app.js

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

Обновление:

Я закончил тем, что использовал webpack, чтобы упаковать все в мой app.js, больше никаких ошибок или жалоб.

0 голосов
/ 12 ноября 2018

Если ваш пример кода завершен, это не похоже на то, что вы импортируете JavaScript-реактив-начальной загрузки. Запуск npm install --save react-bootstrap загружает пакет, но не добавляет его автоматически на ваш сайт. Если вы используете пакет модуля, вы можете импортировать пакет, добавив import { Navbar} from "react-bootstrap" вверху файла app.js. Документация по реакции-bootstrap говорит об этом здесь . Если вы не используете пакетный модуль, вы можете использовать unpkg так же, как вы для реакции и реагирования.

...