@wgoo/cli/site/desktop/App.jsx

Wgoo Cli 是一个 React 组件库构建工具，通过 Wgoo Cli 可以快速搭建一套功能完备的 React 组件库。

import React from 'react';
import './app.less';

import { config } from 'site-desktop-shared';
import { router } from './router';
import { getLang } from '../common/locales';

import Doc from './components/Doc.jsx';

class App extends React.Component {
  constructor(props) {
    super(props);

    const currentRoute = this.getCurrentRoute();
    this.state = {
      currentRoute: currentRoute,
      hasSimulator: true,
    };
  }

  get lang() {
    const { meta } = this.state.currentRoute;
    const { lang } = meta || {};
    return lang || '';
  }

  get langConfigs() {
    const { locales = {} } = config.site;
    return Object.keys(locales).map((key) => ({
      lang: key,
      label: locales[key].langLabel || '',
    }));
  }

  get config() {
    const { locales } = config.site;

    if (locales) {
      return locales[this.lang];
    }

    return config.site;
  }

  get versions() {
    return config.site.versions || null;
  }

  componentDidMount() {
    window.addEventListener('hashchange', this.hashchange);
    this.setTitleAndToogleSimulator();
  }

  componentWillUnmount() {
    window.removeEventListener('hashchange', this.hashchange);
  }

  hashchange = () => {
    const currentRoute = this.getCurrentRoute();
    this.setState({ currentRoute });
  };

  getCurrentRoute = () => {
    const locationHash = window.location.hash;
    const currentRoute = router.routes.find((item) => item.hash === locationHash);
    if (currentRoute) return currentRoute;
    const currentLang = getLang();
    const homeRoute = router.routes.find((item) => item.name === currentLang);
    return homeRoute || {};
  };

  /**
   * 设置 window.title, 并且切换模拟器
   */
  setTitleAndToogleSimulator = () => {
    let { title } = this.config;

    const navItems = this.config.nav.reduce((result, nav) => [...result, ...nav.items], []);

    const { meta = {} } = this.state.currentRoute;

    const current = navItems.find((item) => {
      return item.path === meta.name;
    });

    if (current && current.title) {
      title = current.title + ' - ' + title + '-' + this.config.description;
    } else if (this.config.description) {
      title += ` - ${this.config.description}`;
    }

    document.title = title;

    const hasSimulator = !(
      config.site.hideSimulator ||
      this.config.hideSimulator ||
      (current && current.hideSimulator)
    );

    if (hasSimulator === this.state.hasSimulator) return;

    this.setState({ hasSimulator });
  };

  render() {
    const { currentRoute, hasSimulator } = this.state;
    const Comp = currentRoute.component || null;
    const simulator = `/mobile.html${currentRoute.hash}`;

    return (
      <div className='app'>
        {this.config && (
          <Doc
            lang={this.lang}
            langConfigs={this.langConfigs}
            config={this.config}
            versions={this.versions}
            hasSimulator={hasSimulator}
            simulator={simulator}
          >
            {Comp && <Comp />}
          </Doc>
        )}
      </div>
    );
  }
}

export default App;