platform-bi-web/main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { LocaleProvider, DatePicker, message } from 'antd';
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import {
    Router as HashRouter , // 或者是HashRouter、MemoryRouter
    Route,   // 这是基本的路由块
    Link,    // 这是a标签
    Switch ,  // 这是监听空路由的
    Redirect, // 这是重定向
    Prompt   // 防止转换
} from 'react-router-dom';

import createHistory from 'history/createHashHistory';
import App from './app/component/chartDesigner/layout';
const history = createHistory();
import './app/utils/baseUtils';
import './main.less';

moment.locale('zh-cn');


class DateT extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: '',
    };
  }
  handleChange(date) {
    message.info('您选择的日期是: ' + (date ? date.toString() : ''));
    this.setState({ date });
  }
  render() {
    let arr = [1,2,3,4,4,5,6,7];
    console.log(arr.map(function(a,i){return a+1;}));
    return (
      <LocaleProvider locale={zhCN}>
        <div style={{ width: 400, margin: '100px auto' }}>
          <DatePicker onChange={value => this.handleChange(value)} />
          <div style={{ marginTop: 20 }}>当前日期：{this.state.date && this.state.date.toString()}</div>
        </div>
      </LocaleProvider>
    );
  }
}

// A simple data API that will be used to get the data for our
// components. On a real website, a more robust data fetching
// solution would be more appropriate.
const PlayerAPI = {
	players: [
		{ number: 1, name: "Ben Blocker", position: "G" },
		{ number: 2, name: "Dave Defender", position: "D" },
		{ number: 3, name: "Sam Sweeper", position: "D" },
		{ number: 4, name: "Matt Midfielder", position: "M" },
		{ number: 5, name: "William Winger", position: "M" },
		{ number: 6, name: "Fillipe Forward", position: "F" }
	],
	all: function() { return this.players},
	get: function(id) {
		const isPlayer = p => p.number === id
		return this.players.find(isPlayer)
	}
}
  
  // The FullRoster iterates over all of the players and creates
  // a link to their profile page.
  const FullRoster = () => (
	<div>
	  <ul>
		{
		  PlayerAPI.all().map(p => (
			<li key={p.number}>
			  <Link to={`/roster/${p.number}`}>{p.name}</Link>
			</li>
		  ))
		}
	  </ul>
	</div>
  )
  
  // The Player looks up the player using the number parsed from
  // the URL's pathname. If no player is found with the given
  // number, then a "player not found" message is displayed.
  const Player = (props) => {
	const player = PlayerAPI.get(
	  parseInt(props.match.params.number, 10)
	)
	if (!player) {
	  return <div>Sorry, but the player was not found</div>
	}
	return (
	  <div>
		<h1>{player.name} (#{player.number})</h1>
		<h2>Position: {player.position}</h2>
		<Link to='/roster'>Back</Link>
	  </div>
	)
  }
  
  // The Roster component matches one of two different routes
  // depending on the full pathname
  const Roster = () => (
	<Switch>
	  <Route exact path='/roster' component={FullRoster}/>
	  <Route path='/roster/:number' component={Player}/>
	</Switch>
  )
  
  const Schedule = () => (
	<div>
	  <ul>
		<li>6/5 @ Evergreens</li>
		<li>6/8 vs Kickers</li>
		<li>6/14 @ United</li>
	  </ul>
	</div>
  )
  
  const Home = () => (
	<div>
	  <h1>Welcome to the Tornadoes Website!</h1>
	</div>
  )
  
  const Main = () => (
	<main>
	  <Switch>
		<Route exact path='/' component={Home}/>
		<Route path='/roster' component={Roster}/>
		<Route path='/schedule' component={Schedule}/>
		<Route path='/datet' component={DateT}/>
	  </Switch>
	</main>
  )
  
  const Header = () => (
	<header>
	  <nav>
		<ul>
		  <li><Link to='/'>Home</Link></li>
		  <li><Link to='/roster'>Roster</Link></li>
		  <li><Link to='/schedule1'>Schedule</Link></li>
		  <li><Link to='/datet'>DateT</Link></li>
		</ul>
	  </nav>
	</header>
  )
  
//   const App = () => (
// 	<div>
// 	  <Header />
// 	  <Main />
// 	</div>
//   )
  
ReactDOM.render((
	<LocaleProvider locale={zhCN}>
		<HashRouter history={history}>
			<App />
		</HashRouter>
	</LocaleProvider>
), document.getElementById('root'))