Как получить динамическую загрузку navbar React Bootstrap
Я пытаюсь получить Nav NavItem динамически, я смог заполнить, но не динамически, я бы хотел сделать следующее: у меня есть на моем сайте домашняя страница с последними новостями и разделы Политика, Технологии, Бизнес ... для поиска по каждой категории, но только то, что единственное, что меняется между ними, - это идентификатор категории, код, который я смог сделать:
CustomNavbar.jsx
render() {
return (
<Navbar default collapseOnSelect>
<Navbar.Header>
<Navbar.Toggle />
<Navbar.Brand>
<Link id = "Link" to = "/">
<img src = {logo} height = "30" alt = "logo"/>
</Link>
</Navbar.Brand>
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey = {1} componentClass = {Link} to = "/politics" href = "/politics">
POLITICS
</NavItem>
<NavItem eventKey = {2} componentClass = {Link} to = "/business" href = "/business" >
BUSINESS
</NavItem>
<NavItem eventKey = {3} componentClass = {Link} to = "/tech" href = "tech">
TECH
</NavItem>
<NavItem eventKey = {4} componentClass = {Link} to = "/science" href = "science">
SCIENCE
</NavItem>
<NavItem eventKey = {5} componentClass = {Link} to = "/sports" href = "sports">
SPORTS
</NavItem>
<NavItem eventKey = {6} id = "Login" componentClass = {Link} to = "/login" href = "login" >
LOGIN
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
Я хочу заполнить мои NavbarItems чем-то вроде этого:
CustomNavbar.jsx
constructor(props) {
super(props);
this.state = {
'items': [],
isLoading: false,
error: null,
};
}
componentDidMount() {
this.getItems();
}
getItems() {
this.setState({ 'isLoading': true });
fetch('xxx/api/category/')
.then(results => {
if (results.ok) {
return results.json();
} else {
throw new Error('Something went wrong ...');
}
})
.then(results => this.setState({ 'items': results, 'isLoading': false }))
.catch(error => this.setState({ error, isLoading: false }));
}
render() {
return (
<Navbar default collapseOnSelect>
<Navbar.Header>
<Navbar.Toggle />
<Navbar.Brand>
<Link id = "Link" to = "/">
<img src = {logo} height = "30" alt = "logo"/>
</Link>
</Navbar.Brand>
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
{this.state.items.map(function (item, index) {
<NavItem eventKey = {index} componentClass = {Link}
to = "/categories/" + {item.name}" href = "/categories/" + {item.name}>
{item.name}
</NavItem>
})}
LOGIN
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
Мои маршруты:
App.js
import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './components/Home/Home';
import Politics from './components/Politics/Politics';
import Business from './components/Business/Business';
import Tech from './components/Tech/Tech';
import Science from './components/Science/Science';
import Sports from './components/Sports/Sports';
import Login from './components/User/Login/Login';
import User from './components/User/User/User';
import Navbar from './components/CustomNavbar/CustomNavbar';
class App extends Component {
render() {
return (
<Router>
<div>
<Navbar></Navbar>
<Route exact path = "/" component = {Home}/>
<Route path = "/politics" component = {Politics}/>
<Route path = "/business" component = {Business}/>
<Route path = "/tech" component = {Tech}/>
<Route path = "/science" component = {Science}/>
<Route path = "/sports" component = {Sports}/>
<Route path = "/login" component = {Login}/>
<Route path = "/user" component = {User}/>
</div>
</Router>
);
}
}
export default App;
Я хочу заполнить эти категории как Category, без необходимости повторять код для монтирования экрана, который, как я думал, будет передавать значение категории через URL-адрес, но я не знаю, как это сделать в React, какая-либо помощь?
Ожидаемый результат:
Текущая структура папки:
Структура результатов папки:
Спасибо!
Да, посмотрите мою последнюю правку и посмотрите, сможете ли вы мне помочь !! Спасибо!
Ответы 1
Основываясь на видимости контекста публикации, вы можете создавать такие динамические файлы.
Решение: Вы передали имя категории в качестве параметра url и получили его в компоненте (в моем примере это будет Категория).
// some import statements
class App extends React.Component {
render() {
return (
<BrowserRouter>
<Navbar />
<Switch>
<Route path = "categories/:categoryName" component = {Category} />
</Switch>
</BrowserRouter>
)
}
}
// Category component
class Category extends React.Component {
render() {
const { categoryName } = this.props.match.params;
return (
// based on the category name you can render what you want
)
}
}
Альтернативным способом может быть компонент высшего порядка.
Я думаю, что это решает проблему с маршрутами, посмотрите мои изменения, как я хочу заполнить Navitem, какая помощь для этой формы? Спасибо за помощь!
Вы говорите о CustomNavbar.jsx? Думаю, это правильно. но вы должны использовать lamda func / arrow func внутри вашего цикла map, и вы должны вернуться. Или . вы про маршруты для динамической генерации? ?
Мне нужны маршруты, я определяю только один компонент, например категорию, и там, в CustomNavbar, я определяю URL-адреса и элементы навигационной панели в соответствии с возвращением API
Итак, что вам нужно сделать, так это сделать его компонентом приложения в качестве компонента класса, а в componentDidMount получить эти элементы. Затем создайте эти маршруты, как вы это делали на панели навигации. На панели навигации не извлекайте их снова, а вместо этого передайте элементы из приложения в панель навигации.
Да, я думаю, этот способ работает, посмотрите на мое последнее редактирование с желаемой структурой папок, чтобы лучше понять сценарий, который я ищу, в текущей форме я повторяю много кода, потому что я закончил до создания компонента для каждой категории, но я хочу, чтобы он был как отдельный компонент категории, я верю, что теперь понимание улучшится, спасибо !!
Ага, я рад, что это помогает. Не могли бы вы отметить это как ответ, чтобы мне не пришлось возвращаться
Извините, у меня есть еще один вопрос относительно динамического заполнения Navitem в CustomNavbar. Могу ли я использовать для этого функцию карты в списке? В каком месте делать выборку из списка? В app.jsx или в компоненте CustomNavbar?
Поскольку это маршруты, вы должны получить их в app.jsx (он же контейнер приложения). Прокладка? css? вы можете просто использовать css в js. Если вам нужен какой-либо из результатов, просто передайте его как опору.
Вы пытаетесь динамически получать категории панели навигации, а затем динамически определять маршруты?