一個組件身上會有兩個屬性`props`和`context`，props不必多講，context則是根組件（沒有父級但有子級的組件）開辟的一塊作用域，讓子孫組件能夠輕易的通過這個作用域拿到根組件共享出的屬性和方法。 ``` static childContextTypes(根組件) --- static contextTypes(子孫組件) //通知一聲要傳遞 / 接收 環境中的哪些方法和變量 getChildContext(){} // 具體要傳遞的方法和屬性 ``` >**注意：** 即使是函數式組件，也會有兩個屬性 ## v001 ``` //index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App.js'; // import {Route} from 'react-router-dom'; import {Route} from './react-router-dom'; let Home = ()=><div>home</div>; let User = ()=><div>User</div>; let Detail = ()=><div>detail</div>; ReactDOM.render(<App> <Route path='/home' component={Home}/> <Route path='/user'component={User}/> <Route path='/detail' component={Detail}/> </App>, document.getElementById('root')); ``` // ``` //Router/HashRouter.js import React from 'react'; import PropTypes from 'prop-types'; export default class xxx extends React.Component{ static childContextTypes = { location:PropTypes.object ,history:PropTypes.object } constructor(props){ super(props); this.state = { location:{ pathname:window.location.hash.slice(1)||'/' } } } getChildContext(){ return { location:this.state.location ,history:{ push(path){ console.log(path); window.location.hash = path; //會自動添加'#' } } } } componentDidMount(){ let render = ()=>{ this.setState({location:{pathname:window.location.hash.slice(1)||'/'}}); } window.addEventListener('hashchange',render); } render(){ return this.props.children; } } ``` // ``` // Router/Route.js import React from 'react'; import PropTypes from 'prop-types'; export default class xxx extends React.Component{ static contextTypes = { location:PropTypes.object ,history:PropTypes.object } render(){ let {path,component:Component} = this.props; let {location:{pathname}} = this.context; // console.log(this.context); if(path === pathname||pathname.startsWith(path)){ return <Component location={this.context.location}/>; }else{ return null; } } } ``` // ``` // Router/Link.js import React from 'react'; import PropTypes from 'prop-types' export default class xxx extends React.Component{ static contextTypes = { history:PropTypes.object } render(){ return ( <a onClick={()=>this.context.history.push(this.props.to)}> {this.props.children} </a> ) } } ``` // ``` // Components/App.js import React from 'react'; // import {HashRouter as Router,Link} from 'react-router-dom'; import {HashRouter as Router,Link} from '../react-router-dom'; export default class xxx extends React.Component{ render(){ return ( <Router> <div className='container'> <ul className='Nav'> <li><Link to='/home'>首頁</Link></li> <li><Link to='/user'>用戶</Link></li> <li><Link to='/detail'>詳情</Link></li> </ul> <div className='View'> {this.props.children} </div> </div> </Router> ) } } ```