Создать боковое навигационное меню со следующими данными. Отображение заголовка и описания по щелчку соответствующих пунктов меню. Держите меню слева от страницы и панель дисплея справа. Используйте Redux.
Это была проблема. В основном мне нужна боковая навигация с «Заголовком» и «Описанием» в качестве двух ссылок, по которым я щелкаю, и которые отображают данные справа от sidenav. У меня проблемы с структурированием этого приложения.
Я застрял в том, чтобы выяснить, как хранить состояние в редуксе. Все, что мне нужно сделать, это иметь две ссылки слева, щелкнуть по ним и отобразить информацию из объекта меню справа. Я не могу заставить его работать с помощью this.state.menu. Кто-нибудь может указать мне правильное направление, пожалуйста?
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {decorator as reduxBurgerMenu} from 'redux-burger-menu';
import { bubble as Menu } from "react-burger-menu";
const ReduxBurgerMenu = reduxBurgerMenu(Menu);
class Sidebar extends Component {
state = {
menu: {
title: "Menu title",
description: "Menu description",
products: {
title: "Products title",
description: "Product description",
product: [
{
device: {
title: "Device title",
description: "Device description",
types: [
{
name: "Modem",
title: "Modem title",
description: "Modem description"
},
{
name: "charger",
title: "charger title",
description: "charger description"
}
]
}
},
{
laptop: {
title: "Laptop title",
description: "Laptop description",
types: [
{
name: "Apple",
title: "Apple title",
description: "Apple description"
},
{
name: "Lenevo",
title: "Lenevo title",
description: "Lenevo description"
}
]
}
},
{
mobile: {
title: "Mobile title",
description: "Mobile description",
types: [
{
name: "Samsung",
title: "Samsung title",
description: "Samsung description"
},
{
name: "Nokia",
title: "Nokia title",
description: "Nokia description"
}
]
}
}
]
}
}
}
render() {
return (
<ReduxBurgerMenu isOpen={ this.props.isOpen }>
<a className="menu-item" href="/">
<div>
{ this.state.menu }
</div>
</a>
<a className="menu-item" href="/burgers">
Burgers
</a>
<a className="menu-item" href="/pizzas">
Pizzas
</a>
<a className="menu-item" href="/desserts">
Desserts
</a>
</ReduxBurgerMenu>
)
}
}
// const mapStateToProps = state => {
// return {
// title: state.menu.title,
// description: state.menu.description,
// products: state.menu.products,
// product: state.menu.products.product
// };
// };
// mapDispatchToProps = dispatch => {
// return {
// };
// };
export default connect()(Sidebar);
{
"menu": {
"title ": "Menu title",
"description": "Menu description",
"products": {
"title ": "Products title",
"description": "Product description",
"product": [
{
"device": {
"title ": "Device title",
"description": "Device description",
"types": [
{
"name": "Modem",
"title ": "Modem title",
"description": "Modem description"
},
{
"name": "charger",
"title ": "charger title",
"description": "charger description"
}
]
}
},
{
"laptop": {
"title ": "Laptop title",
"description": "Laptop description",
"types": [
{
"name": "Apple",
"title ": "Apple title",
"description": "Apple description"
},
{
"name": "Lenevo",
"title ": "Lenevo title",
"description": "Lenevo description"
}
]
}
},
{
"mobile": {
"title ": "Mobile title",
"description": "Mobile description",
"types": [
{
"name": "Samsung",
"title ": "Samsung title",
"description": "Samsung description"
},
{
"name": "Nokia",
"title ": "Nokia title",
"description": "Nokia description"
}
]
}
}
]
}
}
}