使用react.js显示bootstrap navbar(display bootstrap navbar using react.js)

我有一个非常简单的React.js项目，我试图在项目中添加一个bootstrap导航栏，但我似乎无法弄清楚如何让导航栏显示在页面上。我可以在这里找到我引用的导航栏示例， http：//codepen.io/zhaozhiming/pen/LNGyvR

该项目如下所示，

的index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <title>My super cool title.</title> </head> <body> <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="bundle.js" ></script> </body> </html>

index.js

import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App.js'; ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React, {PropTypes} from 'react'; import styles from './App.css'; import NavBarTest from './common/NavBar-test'; const App = () => { return ( <div id="parent"> <div>Hello, App!</div> <NavBarTest {...NavBarTest} /> </div> ) } export default App;

导航栏，test.js

import React from 'react'; // create classes var NavBar = React.createClass({ render: function(){ return( <nav className="navbar navbar-inverse"> <div className="container-fluid"> <div className="navbar-header"> <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> <span className="sr-only">Toggle navigation</span> <span className="icon-bar"></span> <span className="icon-bar"></span> <span className="icon-bar"></span> </button> <NavBrand linkTo={this.props.brand.linkTo} text={this.props.brand.text} /> </div> <div className="collapse navbar-collapse" id="navbar-collapse"> <NavMenu links={this.props.links} /> </div> </div> </nav> ); } }); var NavBrand = React.createClass({ render: function(){ return ( <a className="navbar-brand" href={this.props.linkTo}>{this.props.text}</a> ); } }); var NavMenu = React.createClass({ render: function(){ var links = this.props.links.map(function(link){ if(link.dropdown) { return ( <NavLinkDropdown links={link.links} text={link.text} active={link.active} /> ); } else { return ( <NavLink linkTo={link.linkTo} text={link.text} active={link.active} /> ); } }); return ( <ul className="nav navbar-nav"> {links} </ul> ); } }); var NavLinkDropdown = React.createClass({ render: function(){ var active = false; var links = this.props.links.map(function(link){ if(link.active){ active = true; } return ( <NavLink linkTo={link.linkTo} text={link.text} active={link.active} /> ); }); return ( <li className={"dropdown " + (active ? "active" : "")}> <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> {this.props.text} <span className="caret"></span> </a> <ul className="dropdown-menu"> {links} </ul> </li> ); } }); var NavLink = React.createClass({ render: function(){ return( <li className={(this.props.active ? "active" : "")}><a href={this.props.linkTo}>{this.props.text}</a></li> ); } }); // set data var navbar = {}; navbar.brand = {linkTo: "#", text: "React Bootstrap Navbar"}; navbar.links = [ {linkTo: "#", text: "Link 1"}, {linkTo: "#", text: "Link 2"}, {dropdown: true, text: "Dropdown", links: [ {linkTo: "#", text: "Dropdown Link 1"}, {linkTo: "#", text: "Dropdown Link 2", active: true} ]} ]; export default NavBar;

最后，页面似乎呈现，但我在浏览器控制台中看到以下错误/警告消息。任何有关如何让这个导航栏显示在页面上的帮助将非常感激。

I have a very simple React.js project where I am trying to add a bootstrap navbar to the project, but I can't seem to figure out how to get the navbar to display on the page. The navbar example I am referencing can be found here, http://codepen.io/zhaozhiming/pen/LNGyvR

The project looks like the following,

index.html

index.js

import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App.js'; ReactDOM.render(<App />, document.getElementById('root'));

App.js

Navbar-test.js

Finally, the page appears to render, but I am seeing the following error / warning message in the browser console. Any help on how I can get this navbar to display on the page would greatly be appreciated.

最满意答案

根据您显示的结构，您应该在App组件中呈现NavBar ，因为您是默认从Navbar-test.js文件导出NavBar 。还有一个在NavBar组件中你正在通过this.props.brand访问值，所以你需要在app.js文件中定义var navbar数据（ 你在app.js文件的最后一个文件中定义的数据 ），在app.js使用它app.js文件，它会工作：

import React, {PropTypes} from 'react'; import styles from './App.css'; import NavBar from './common/NavBar-test'; const App = () => { return ( <div id="parent"> <div>Hello, App!</div> <NavBar {...navbar}/> </div> ) } var navbar = {}; navbar.brand = { linkTo: "#", text: "React Bootstrap Navbar" }; navbar.links = [ { linkTo: "#", text: "Link 1" }, { linkTo: "#", text: "Link 2" }, { dropdown: true, text: "Dropdown", links: [ { linkTo: "#", text: "Dropdown Link 1" }, { linkTo: "#", text: "Dropdown Link 2", active: true } ] } ];

检查工作代码： http ： //codepen.io/zhaozhiming/pen/LNGyvR？edit = 0010

According to the structure you showed, you should render NavBar in App component because you are default exporting NavBar from Navbar-test.js file. One more this in NavBar component you are accessing the values by this.props.brand so you need to define the var navbar data (data that you defined in the last of app.js file) in app.js file, Use this in app.js file, it will work:

Check the working code: http://codepen.io/zhaozhiming/pen/LNGyvR?editors=0010

更多推荐

className,js,React,电脑培训,计算机培训,IT培训"/> <meta name="descriptio