0
我是ReactJS的新手，无法使用react-bootstrap导航栏。由于这方面的信息很少或没有，我可以使用指导。react-bootstrap NavBar问题
当我在index.js中直接添加navbar代码并将其呈现在那里时，它可以工作，但我想为每个功能使用组件。
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(<App/>, document.getElementById('App'));
//App.js
import '../public/App.css';
import NavigationBar from './components/NavigationBar';
import Appintro from './components/Appintro';
class App extends Component {
render() {
return (
<div className="App">
<NavigationBar />
<Appintro />
</div>
);
}
}
export default App;
//的NavBar组分[这个不工作]
let React , {Component} = require('react')
let Navbar = require("react-bootstrap/lib/Navbar");
let NavItem = require("react-bootstrap/lib/NavItem");
let Nav = require ("react-bootstrap/lib/Nav");
class NavigationBar extends Component {
render() {
return (
<div>
const appNavbar = (
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<a href="#">Company-x</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} href="#">home</NavItem>
<NavItem eventKey={2} href="#">about</NavItem>
<NavItem eventKey={3} href="#">products</NavItem>
<NavItem eventKey={4} href="#">services</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)
</div>
);
}
}
export default NavigationBar;
//前奏
import React, { Component } from 'react';
import headeeer from '../images/headeeer.jpg';
let Jumbotron = require ("react-bootstrap/lib/Jumbotron");
class Appintro extends Component {
render() {
Jumbotron=(
<h1>Hello world, I am react-bootstrap jumbotron</h1>
)
return (
<div>
{Jumbotron}
<img src={headeeer} className='imagesss' alt='jhe' />
</div>
);
}
}
export default Appintro;
嗨@anthony我都试过，看到错误[类导航栏扩展组件{ > 10 |常量appNavbar =（ |^ 11 | <导航栏倒数collapseOnSelect> 12 | 13 | –
emekaokoli
请我还需要你对这个帮助 – emekaokoli
我纠正你的语法，我有没有这个组件的上下文，并且没有依赖关系会被拉入，所以当你点击'Run code snippet'按钮时，我不会期望它能够工作。 我很抱歉，我的初始回复不正确，我已经纠正它并且做出了一个正确语法的工作示例，如下所示： https://codepen.io/c0un7z3r0/pen/zNQoey –