reactjs – 嵌套菜单(子菜单)
发布时间:2020-12-15 16:15:43 所属栏目:百科 来源:网络整理
导读:我正在尝试实现子菜单(嵌套菜单). 值得一提的是,我使用的是hydra组件,并且之前没有使用redux的经验(几天前因为这个特定问题而开始学习它). 我已经按照材料-ui上提供的示例来嵌套列表https://material-ui.com/demos/lists/#nested-list.并从中获取教程 https:
我正在尝试实现子菜单(嵌套菜单).
值得一提的是,我使用的是hydra组件,并且之前没有使用redux的经验(几天前因为这个特定问题而开始学习它). 我已经按照材料-ui上提供的示例来嵌套列表https://material-ui.com/demos/lists/#nested-list.并从中获取教程 所以我有几个问题. 1)我是否可以使用有状态组件(MyMenu)来处理菜单项的切换? 一个例子与react-admin无关,但它只是我的意思. import React,{ Component } from "react"; import { connect } from "react-redux"; import { addArticle } from "../actions/index"; const mapDispatchToProps = dispatch => { return { addArticle: article => dispatch(addArticle(article)) }; }; class ConnectedForm extends Component { constructor() { super(); this.state = { title: "" }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({ [event.target.id]: event.target.value }); } handleSubmit(event) { event.preventDefault(); const { title } = this.state; const id = uuidv1(); this.props.addArticle({ title,id }); this.setState({ title: "" }); } render() { const { title } = this.state; return ( <form onSubmit={this.handleSubmit}> <div className="form-group"> <label htmlFor="title">Title</label> <input type="text" className="form-control" id="title" value={title} onChange={this.handleChange} /> </div> <button type="submit" className="btn btn-success btn-lg"> SAVE </button> </form> ); } } const Form = connect(null,mapDispatchToProps)(ConnectedForm); export default Form; 2)如果没有,我可以通过在存储中声明一个新状态来实现这一点,例如open:false,然后使用自定义reducer来处理它. 3(奖金).如果这不是一个问题我会很感激,如果有人可以让我朝着正确的方向开始学习,那么我可以不那么痛苦地设法解决与这个惊人的框架相关的问题:) 解决方法
react-admin演示现在显示了在
examples/demo/src/layout/Menu.js中执行此操作的方法:
import React,{ Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import compose from 'recompose/compose'; import SettingsIcon from '@material-ui/icons/Settings'; import LabelIcon from '@material-ui/icons/Label'; import { withRouter } from 'react-router-dom'; import { translate,DashboardMenuItem,MenuItemLink,Responsive,} from 'react-admin'; import visitors from '../visitors'; import orders from '../orders'; import invoices from '../invoices'; import products from '../products'; import categories from '../categories'; import reviews from '../reviews'; import SubMenu from './SubMenu'; class Menu extends Component { state = { menuCatalog: false,menuSales: false,menuCustomers: false,}; static propTypes = { onMenuClick: PropTypes.func,logout: PropTypes.object,}; handleToggle = menu => { this.setState(state => ({ [menu]: !state[menu] })); }; render() { const { onMenuClick,open,logout,translate } = this.props; return ( <div> {' '} <DashboardMenuItem onClick={onMenuClick} /> <SubMenu handleToggle={() => this.handleToggle('menuSales')} isOpen={this.state.menuSales} sidebarIsOpen={open} name="pos.menu.sales" icon={<orders.icon />} > <MenuItemLink to={`/commands`} primaryText={translate(`resources.commands.name`,{ smart_count: 2,})} leftIcon={<orders.icon />} onClick={onMenuClick} /> <MenuItemLink to={`/invoices`} primaryText={translate(`resources.invoices.name`,})} leftIcon={<invoices.icon />} onClick={onMenuClick} /> </SubMenu> <SubMenu handleToggle={() => this.handleToggle('menuCatalog')} isOpen={this.state.menuCatalog} sidebarIsOpen={open} name="pos.menu.catalog" icon={<products.icon />} > <MenuItemLink to={`/products`} primaryText={translate(`resources.products.name`,})} leftIcon={<products.icon />} onClick={onMenuClick} /> <MenuItemLink to={`/categories`} primaryText={translate(`resources.categories.name`,})} leftIcon={<categories.icon />} onClick={onMenuClick} /> </SubMenu> <SubMenu handleToggle={() => this.handleToggle('menuCustomer')} isOpen={this.state.menuCustomer} sidebarIsOpen={open} name="pos.menu.customers" icon={<visitors.icon />} > <MenuItemLink to={`/customers`} primaryText={translate(`resources.customers.name`,})} leftIcon={<visitors.icon />} onClick={onMenuClick} /> <MenuItemLink to={`/segments`} primaryText={translate(`resources.segments.name`,})} leftIcon={<LabelIcon />} onClick={onMenuClick} /> </SubMenu> <MenuItemLink to={`/reviews`} primaryText={translate(`resources.reviews.name`,{ smart_count: 2,})} leftIcon={<reviews.icon />} onClick={onMenuClick} /> <Responsive xsmall={ <MenuItemLink to="/configuration" primaryText={translate('pos.configuration')} leftIcon={<SettingsIcon />} onClick={onMenuClick} /> } medium={null} /> <Responsive small={logout} medium={null} // Pass null to render nothing on larger devices /> </div> ); } } const mapStateToProps = state => ({ open: state.admin.ui.sidebarOpen,theme: state.theme,locale: state.i18n.locale,}); const enhance = compose( withRouter,connect( mapStateToProps,{} ),translate ); export default enhance(Menu); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |