Question

我正在尝试使用Bootstrap模式将Navbar添加到我的react应用程序中，我确实按照他们的文档建议的方式安装了它：npm install --save react-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

app.js中的第36行是：app.js脚本文件中的导航栏

Answer 1

如果您的示例代码已完成，则看起来您正在导入react-bootstrap JavaScript。运行npm install --save react-bootstrap会下载程序包，但不会自动将其添加到您的站点。如果您使用的是模块捆绑器，则可以通过在app.js文件顶部添加import { Navbar} from "react-bootstrap"来导入软件包。 react-bootstrap的文档讨论了此here。如果您不使用模块捆绑器，则可以像使用react和react-dom一样使用unpkg。

Answer 2

更新：

我最终使用webpack将所有内容打包到我的app.js中，不再出现错误或抱怨。

React无法识别引导方式错误“未定义导航栏”

2 个答案: