import React, { Component } from 'react'; import * as _ from 'lodash'; import { Nav } from '../../../index'; const navList = [ { path: 'components', title: '所有组件', }, { path: 'demo', title: '主题样例', children: [ { path: 'demo_workstation', title: '工作台', }, ], }, ]; const searchToJson = (search = '') => { const pairs = search.substring(1).split('&'); const obj = {}; let pair; let i; for (i in pairs) { if (pairs[i] === '') continue; pair = pairs[i].split('='); obj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]); } return obj; }; const jsonToSearch = (json = {}) => { return Object.entries(json) .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`) .join('&'); }; export class Navbar extends Component { static defaultProps = { notifyNavChange: path => { const json = searchToJson(window.location.search); json.itemKey = path; window.location.search = jsonToSearch(json); }, }; constructor(props) { super(props); this.state = { selectedKeys: ['components'], }; } componentDidMount() { this.setKey(); } componentDidUpdate() { this.setKey(); } setKey(key) { // const pathname = window.location.hash; key = key || searchToJson()['itemKey']; const { selectedKeys } = this.state; if (key && key !== selectedKeys[0]) { this.setState({ selectedKeys: [key] }); } } setActive = (key, path) => { if (key !== this.state.selectedKeys[0]) { // 通知父组件变更路由,之后会触发didUpdate this.props.notifyNavChange(path); this.setState({}); } }; renderNavItem = config => { const { path, title, children } = config; let props = { itemKey: path, text: title, key: path, }; if (children) { return {children.map(sub => this.renderNavItem(sub))}; } return this.setActive(path, path)} />; }; render() { let { selectedKeys } = this.state; return ( ); } } export default Navbar;