0
Я новичок в ReactJS и не знаю, как использовать перезагрузку navbar. Я мог бы использовать руководство, так как информации об этом мало или вообще нет.реакция-bootstrap проблема NavBar
Когда я добавляю код навигатора непосредственно внутри index.js и визуализирую его там, он работает, но я хочу использовать компонент для каждой функции.
//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 | Const appNavbar = ( |^ 11 | 12 | 13 |. –
emekaokoli
Пожалуйста, мне все еще нужна ваша помощь по этому – emekaokoli
я просто исправил свой синтаксис, у меня есть нет контекста для этого компонента, и ни одна из зависимостей не будет втянута, поэтому я не ожидал, что он сработает, когда вы нажмете кнопку «Выполнить фрагмент кода». Прошу прощения, мой первоначальный ответ был неправильным, я исправил его и сделал рабочий пример правильного синтаксиса, как показано здесь: https://codepen.io/c0un7z3r0/pen/zNQoey –