本文共计693个文字，预计阅读时间需要3分钟。

jsx导入 React 和 ReactDOM；导入 Index 组件；导入 ComponentList 和 ComponentDetails 组件；从 'r' 中导入 Router、Route 和 hashHistory。

gistfile1.txt

import React from 'react'; import ReactDOM from 'react-dom'; import Index from './index'; import ComponentList from './components/list'; import ComponentDetails from './components/details'; import {Router,Route,hashHistory} from 'react-router'; export default class Root extends React.Component{ render(){ return ( //这里替换了之前的 Index，变成了程序的入口 ); }; } ReactDOM.render( , document.getElementById('example')); gistfile2.txt

var React = require('react'); var ReactDOM = require('react-dom'); import ComponentHeader from './components/header'; import ComponentFooter from './components/footer'; import BodyIndex from './components/bodyindex'; import 'antd/dist/antd.css'; export default class Index extends React.Component { componentWillMount(){ //定义你的逻辑即可 console.log("Index - componentWillMount"); } componentDidMount(){ console.log("Index - componentDidMount"); } render() { /* var component; if (用户已登录) { component = } else{ component = } */ return ( {this.props.children} ); } } gistfile3.txt

import React from 'react'; import {Link} from 'react-router'; export default class ComponentHeader extends React.Component { constructor(){ super(); this.state ={ miniHeader: false //默认加载的时候还是高（不是 mini）的头部 }; }; switchHeader(){ this.setState({ miniHeader: !this.state.miniHeader }); }; render() { const styleComponentHeader = { header: { backgroundColor: "#333333", color: "#FFFFFF", "paddingTop": (this.state.miniHeader) ? "3px" : "15px", paddingBottom: (this.state.miniHeader) ? "3px" : "15px" }, //还可以定义其他的样式 }; return (

这里是头部

• 首页
• 嵌套的详情页面
• 列表页面

) } } gistfile4.txt

import React from 'react'; import ReactDOM from 'react-dom'; import BodyChild from './bodychild'; import ReactMixin from 'react-mixin'; import MixinLog from './mixins'; import { Input } from 'antd'; const defaultProps = { username: '这是一个默认的用户名' }; export default class BodyIndex extends React.Component { constructor() { super(); //调用基类的所有的初始化方法 this.state = { username: "Parry", age: 20 }; //初始化赋值 }; changeUserInfo(age) { this.setState({age: age}); //第一种方式 // var mySubmitBotton = document.getElementById('submitButton'); // console.log(mySubmitBotton); // ReactDOM.findDOMNode(mySubmitBotton).style.color = 'red'; //第二种方式 console.log(this.refs.submitButton); this.refs.submitButton.style.color = 'red'; MixinLog.log(); }; handleChildValueChange(event) { this.setState({age: event.target.value}); }; render() { // setTimeout(()=>{ // //更改 state 的时候 // this.setState({username: "IMOOC",age : 30}); // },4000); return (

页面的主体内容

接收到的父页面的属性：userid: {this.props.userid} username: {this.props.username}

age: {this.state.age}

) } } BodyIndex.propTypes = { userid: React.PropTypes.number.isRequired }; BodyIndex.defaultProps = defaultProps; ReactMixin(BodyIndex.prototype, MixinLog); gistfile5.txt

import React from 'react'; //var footerCss = require("../../css/footer.css"); export default class ComponentFooter extends React.Component { render() { var footerConvertStyle = { "miniFooter": { "backgroundColor": "#333333", "color": "#ffffff", "paddingLeft": "20px", "paddingTop": "3px", "paddingBottom": "3px" }, "miniFooter_h1": { "fontSize": "15px" } }; //console.log(footerCss); return (

) } } gistfile6.txt

import React from 'react'; export default class ComponentDetails extends React.Component{ render(){ return (

这里是嵌套在首页中的详细的页面

); }; } gistfile7.txt

import React from 'react'; export default class ComponentList extends React.Component{ render(){ return (

这里是列表页面 Id: {this.props.params.id}

); }; }