9 |
15 | );
16 | }
17 | }
18 |
19 | export default Choose;
--------------------------------------------------------------------------------
/src/day11/container/city.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class City extends Component {
4 | render() {
5 | const { city } = this.props;
6 | return (
7 | 10 | {chooseData && chooseData.length ? chooseData.map((v, i) => ( 11 | {v} 12 | )) : ''} 13 |
14 |
8 | {
9 | city && Object.keys(city).map(v => (
10 |
21 | );
22 |
23 | }
24 | handleChange=(item)=>{
25 | const { handleClick } = this.props;
26 | const spans=document.querySelectorAll('.myCity>span');
27 | // spans.forEach((v,i)=>{
28 |
29 | // console.log(v.firstChild)
30 | // })
31 | // spans[item].classList.add('active')
32 | handleClick(item);
33 | }
34 | }
35 |
36 | export default City;
--------------------------------------------------------------------------------
/src/day11/container/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Choose from './choose';
3 | import City from './city';
4 | import axios from 'axios';
5 | import '../common/style.css';
6 | class Index extends Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | city: {},
11 | chooseData: ["北京"]
12 | }
13 | }
14 |
15 | render() {
16 | const { city, chooseData } = this.state;
17 | return (
18 |
11 |
18 | ))
19 | }
20 | {v}
12 | { 13 | city[v].map((item,i)=>{ 14 | return this.handleChange(item.name)} key={i} className="city">{item.name} 15 | }) 16 | } 17 |
19 |
22 | );
23 | }
24 | componentDidMount() {
25 | axios('./mock/city.json').then(res => {
26 | this.setState({
27 | city: res.data
28 | })
29 | })
30 | }
31 | handleClick = (data) => {
32 | this.setState({
33 | chooseData: Array.from(new Set([...this.state.chooseData, data]))
34 | }, () => {
35 | console.log(this.state.chooseData)
36 | })
37 | }
38 | }
39 |
40 | export default Index;
--------------------------------------------------------------------------------
/src/day11/router/config.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thisislys/react-practice/c4c99bcb1ea0b8cd014e17080495bdad5d053ce0/src/day11/router/config.js
--------------------------------------------------------------------------------
/src/day11/router/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Switch,Route,Redirect } from 'react-router-dom';
3 | class Index extends Component {
4 | render() {
5 | let {routes}=this.props;
6 | let redirects=routes&&routes.length&&routes.filter(v=>v.redirect);
7 | let renderRed=redirects&&redirects.map((v,i)=>(
8 |
19 | {newList.length && (
20 |
30 | );
31 | }
32 |
33 | componentDidMount() {
34 | this.getList();
35 | }
36 | getList = () => {
37 | axios.get('../mock/data.json')
38 | .then((res) => {
39 | this.setState({
40 | data: res.data
41 | })
42 | })
43 |
44 |
45 | }
46 | }
47 |
48 | export default withRouter(Detail);
--------------------------------------------------------------------------------
/src/day12/container/home/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import axios from 'axios';
3 | class Home extends Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = {
7 | data: [],
8 | flag: false,
9 | value: '',
10 |
11 | }
12 | }
13 | render() {
14 | const { data, value, flag } = this.state;
15 | return (
16 |
21 | 
22 |
27 | )
28 | }
29 | {newList[0].nm}
23 |买家评分:{newList[0].sc}
24 |已购{newList[0].wish}件
25 |价格：{newList[0].id}元
26 |
17 |
43 | );
44 | }
45 | componentDidMount() {
46 | this.getList();
47 | if (this.props.location.params) {
48 | this.setState({
49 | flag: true,
50 | value: this.props.location.params
51 | })
52 | // if (this.props.location.params2 && this.props.location.params2.length) {
53 | // this.setState({
54 | // data: this.props.location.params2
55 | // })
56 | // }
57 | }
58 | console.log(this.props)
59 | }
60 | componentWillReceiveProps(nextProps){
61 | this.getList2();
62 | }
63 | getList = () => {
64 | axios.get('./mock/data2.json')
65 | .then((res) => {
66 | this.setState({
67 | data: res.data
68 | })
69 | })
70 | }
71 | getList2=()=>{
72 | if (this.props.location.params) {
73 | this.setState({
74 | flag: true,
75 | value: this.props.location.params
76 | })
77 | if (this.props.location.params2 && this.props.location.params2.length) {
78 | this.setState({
79 | data: this.props.location.params2
80 | })
81 | }
82 | }
83 | }
84 | jump = (v, id) => {
85 | this.props.history.push({ pathname: "/detail/" + id, params: v })
86 | }
87 | handleClear = () => {
88 | axios.get('./mock/data2.json')
89 | .then((res) => {
90 | this.setState({
91 | data: res.data
92 | })
93 | })
94 | this.setState({
95 | value: ''
96 | })
97 | }
98 | handleFind = () => {
99 | let { data, value } = this.state;
100 | let len = data.length;
101 | let arr = [];
102 | let reg = new RegExp(value)
103 | for (var i = 0; i < len; i++) {
104 | if (data[i].nm.match(reg)) {
105 | arr.push(data[i]);
106 | this.setState({
107 | data: arr
108 | })
109 | }
110 | }
111 | }
112 | }
113 |
114 | export default Home;
--------------------------------------------------------------------------------
/src/day12/container/home/input.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class Input extends Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = {
7 | flag: false,
8 | value:''
9 | }
10 | }
11 |
12 | render() {
13 | let {flag,value}=this.state;
14 | return (
15 |
18 |
26 |
27 | this.props.history.push('/input')}> 19 | 20 |
21 | {flag ?22 | × 23 | √ 24 |
: ''} 25 |
28 | {
29 | data && data.map((v, i) => {
30 | return
42 | - this.jump(v, v.id)} key={i}>
31 |
-
33 |
{v.nm}
34 |买家评分:{v.sc}
35 |已购{v.wish}件
36 |价格：{v.id}元
37 |
38 |
16 |
17 | {flag?
22 | );
23 | }
24 | handleChange = (e) => {
25 | if (e.target.value) {
26 | this.setState({
27 | flag: true,
28 | value:e.target.value
29 | })
30 | }
31 | }
32 | handleClear=()=>{
33 | this.setState({
34 | value:''
35 | })
36 | }
37 | handleBack=()=>{
38 | this.props.history.push({
39 | params:this.state.value,
40 | pathname:'/home'
41 | })
42 | // this.props.history.goBack()
43 | }
44 | }
45 |
46 | export default Input;
--------------------------------------------------------------------------------
/src/day12/container/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { BrowserRouter, NavLink } from 'react-router-dom';
3 | import Router from '../router/index.js';
4 | import Config from '../router/config.js';
5 | import '../common/style.css';
6 | class Index extends Component {
7 | render() {
8 | return (
9 | 18 | × 19 | √ 20 |
:''} 21 |
11 |
18 |
15 |
35 | );
36 | }
37 | componentDidMount() {
38 | this.info()
39 | }
40 | handleLogin = () => {
41 | let nameVal = this.refs.name.value;
42 | localStorage.setItem('mine', nameVal);
43 | this.info()
44 | }
45 | info() {
46 | mine = localStorage.getItem('mine');
47 | this.setState({
48 | mines: mine
49 | })
50 | }
51 | }
52 |
53 | export default Mine;
--------------------------------------------------------------------------------
/src/day12/container/type/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import axios from 'axios';
3 | class Type extends Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = {
7 | data: [],
8 | flag: false,
9 | value: ''
10 | }
11 | }
12 | render() {
13 | let { flag, value, data } = this.state;
14 | return (主页
16 | { 17 | mines ? 18 | (
19 |
) :
22 | (用户名:{mines}
20 |账号：{mines}
21 |
23 |
)
33 | }
34 | 登陆
24 |
25 |
26 |
27 |
28 |
29 |
30 | 立即注册找回密码
31 |猫眼电影 客服电话：400-456-12345
32 |
15 |
51 | );
52 | }
53 | handleRender1=()=>{
54 | axios.get('./mock/type.json')
55 | .then((res) => {
56 | this.setState({
57 | data: res.data
58 | })
59 | })
60 | }
61 | handleRender2=()=>{
62 | axios.get('./mock/type2.json')
63 | .then((res) => {
64 | this.setState({
65 | data: res.data
66 | })
67 | })
68 | }
69 | componentDidMount() {
70 | this.getList();
71 | }
72 | getList = () => {
73 | axios.get('./mock/type.json')
74 | .then((res) => {
75 | this.setState({
76 | data: res.data
77 | })
78 | })
79 | axios.get('./mock/data2.json')
80 | .then((res) => {
81 | this.setState({
82 | data2: res.data
83 | })
84 | })
85 | }
86 | handleChange = (e) => {
87 | if (e.target.value) {
88 | this.setState({
89 | flag: true,
90 | value: e.target.value
91 | })
92 | } else {
93 | axios.get('./mock/type.json')
94 | .then((res) => {
95 | this.setState({
96 | data: res.data
97 | })
98 | })
99 | }
100 | }
101 | handleClear = () => {
102 | axios.get('./mock/type.json')
103 | .then((res) => {
104 | this.setState({
105 | data: res.data
106 | })
107 | })
108 | this.setState({
109 | value: ''
110 | })
111 | }
112 | handleFind = () => {
113 | console.log(111)
114 | let { data, value } = this.state;
115 | let len = data.length;
116 | let arr = [];
117 | let reg = new RegExp(value)
118 | for (var i = 0; i < len; i++) {
119 | if (data[i].match(reg)) {
120 | arr.push(data[i]);
121 | console.log(arr)
122 | this.setState({
123 | data: arr
124 | })
125 | }
126 | }
127 | // setTimeout(() => {
128 | // this.props.history.push({
129 | // pathname: '/home',
130 | // params: value,
131 | // params2: this.state.data
132 | // })
133 | // }, 100);
134 |
135 | }
136 | }
137 |
138 | export default Type;
--------------------------------------------------------------------------------
/src/day12/router/config.js:
--------------------------------------------------------------------------------
1 | import Home from "../container/home";
2 | import Type from "../container/type";
3 | import Input from "../container/home/input";
4 | import Detail from "../container/home/detail";
5 | import Mine from "../container/mine"
6 | export default {
7 | routers:[
8 | {
9 | path:'/',
10 | redirect:'/home'
11 | },
12 | {
13 | path:'/home',
14 | component:Home
15 | },
16 | {
17 | path:'/type',
18 | component:Type
19 | },
20 | {
21 | path:'/input',
22 | component:Input
23 | },{
24 | path:'/detail/:id',
25 | component:Detail
26 | },{
27 | path:'/mine',
28 | component:Mine
29 | }
30 | ]
31 | }
--------------------------------------------------------------------------------
/src/day12/router/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {Switch,Redirect,Route} from 'react-router-dom';
3 | class Router extends Component {
4 | render() {
5 | let {routes}=this.props;
6 | let redirects=routes&&routes.length&&routes.filter(item=>item.redirect);
7 | let redirectRender=redirects&&redirects.length&&redirects.map((v,i)=>(
8 |
16 |
17 | {flag ?
22 | 18 | × 19 | √ 20 |
: ''} 21 |价格排序好评排序
23 |
24 |
36 | 进口品牌
25 |
26 | {
27 | data && data.length && data.map((v, i) => {
28 | return
35 | - { this.props.history.push('/home') }} key={i}>
29 |
30 | - {v} 31 |
37 |
50 | 常用分类
38 |
39 | {
40 | data && data.length && data.map((v, i) => {
41 | return
48 |
49 | - { this.props.history.push('/home') }} key={i}>
42 |
-
43 |
- {v} 44 |
22 |
47 | );
48 | }
49 | // 点赞
50 | handlePraise = (count) => {
51 | let { praiseFloag } = this.state;
52 | this.setState({
53 | praiseFloag: !praiseFloag
54 | })
55 | praiseFloag ? --count.praise : ++count.praise;
56 | }
57 | handlePraises = (i) => {
58 | let { data, updata } = this.props;
59 | console.log(data.replyCons[i].praiseFloag, i)
60 | data.replyCons[i].praiseFloag = !data.replyCons[i].praiseFloag;
61 | data.replyCons[i].praiseFloag ? ++data.replyCons[i].praise : --data.replyCons[i].praise;
62 | updata(data)
63 | }
64 | // 删除
65 | handleDel = (i) => {
66 | let { data, updata } = this.props;
67 | let dataItems = data.replyCons;
68 | dataItems.splice(i, 1);
69 | this.setState({
70 | sum: dataItems.length
71 | })
72 | updata(data)
73 | }
74 | //添加评论
75 | handleAdd = () => {
76 | let { data, updata } = this.props;
77 | let newData = [...data.replyCons, {
78 | "name": "我",
79 | "cons": this.refs.ipt.value,
80 | "reply": 23,
81 | "praise": 32,
82 | "praiseFloag": false
83 | }]
84 | data.replyCons = newData;
85 | this.setState({
86 | sum: newData.length
87 | })
88 | updata(data)
89 | this.refs.ipt.value = '';
90 |
91 | }
92 | }
93 | let mapStateToProps = (state) => {
94 | return state.UpdateRender
95 | }
96 | let mapDispatchToProps = (dispatch) => {
97 | return {
98 | updata(payload) {
99 | dispatch({ type: 'UPDATA', payload })
100 | }
101 | }
102 | }
103 | export default connect(mapStateToProps, mapDispatchToProps)(Index);
--------------------------------------------------------------------------------
/src/day13/container/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import '../common/style/style.css';
4 | import axios from 'axios';
5 | import Cons from './cons';
6 | class Index extends Component {
7 | render() {
8 | return (
9 | 8条回复
23 | { 24 | len ? ( 25 |
26 |
43 | ) : ''
44 | }
45 | {data.name} { 27 | this.setState({ 28 | careFloag: !this.state.careFloag 29 | }) 30 | }}>{careFloag ? '已关注' : '+加关注'}
31 |{data.cons}
32 |回复：{data.reply} this.handlePraise(data)}>点赞:{data.praise}
33 | { 34 | data.replyCons ? data.replyCons.map((v, i) => ( 35 |
36 |
40 | )) : ''
41 | }
42 | {v.name}
37 |{v.cons}
38 |回复：{v.reply} this.handlePraises(i)}>点赞:{v.praise} this.handleDel(i)}>删除
39 |评论：{sum}
46 |
10 |
12 | );
13 | }
14 | componentDidMount() {
15 | let { updata } = this.props;
16 | axios('./mock/dynamic.json').then(res => {
17 | updata(res.data);
18 | })
19 |
20 | }
21 | }
22 | let mapStateToProps = (state) => {
23 | return state.UpdateRender
24 | }
25 | let mapDispatchToProps = (dispatch) => {
26 | return {
27 | updata(payload) {
28 | dispatch({ type: 'UPDATA', payload })
29 | }
30 | }
31 | }
32 | export default connect(mapStateToProps, mapDispatchToProps)(Index);
--------------------------------------------------------------------------------
/src/day13/store/action/updata.js:
--------------------------------------------------------------------------------
1 | let defaultState={
2 | data:{}
3 | }
4 | const UpdateRender=(state=defaultState,action)=>{
5 | const {type,payload}=action;
6 | switch (type) {
7 | case "UPDATA":
8 | return {...state,data:{...payload}};
9 | default:
10 | return state;
11 | }
12 | }
13 | export default UpdateRender;
--------------------------------------------------------------------------------
/src/day13/store/index.js:
--------------------------------------------------------------------------------
1 | import {createStore,combineReducers} from 'redux';
2 | import UpdateRender from './action/updata';
3 |
4 | const reducer=combineReducers({
5 | UpdateRender
6 | });
7 | const store=createStore(reducer);
8 | export default store;
--------------------------------------------------------------------------------
/src/day14/common/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | list-style: none;
5 | text-decoration: none;
6 | box-sizing: border-box;
7 | }
8 |
9 | html,
10 | body,
11 | #root {
12 | height: 100%;
13 | width: 100%;
14 | }
15 |
16 | .box>p {
17 | height: 44px;
18 | line-height: 44px;
19 | text-align: center;
20 | background: #00f;
21 | color: #fff;
22 | }
23 | .carClass{
24 | height: 40px;
25 | line-height: 40px;
26 | font-weight: 800;
27 | font-size: 20px;
28 | padding:0 20px;
29 | }
30 | li{
31 | height: 30px;
32 | line-height: 30px;
33 | display: flex;
34 | justify-content: space-between;
35 | padding: 0 20px;
36 | }
--------------------------------------------------------------------------------
/src/day14/container/content.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import axios from 'axios';
3 | import {connect} from 'react-redux';
4 | import '../mock/carClass';
5 | class BuyCar extends Component {
6 | // constructor(props) {
7 | // super(props);
8 | // this.state = {
9 | // carList: []
10 | // }
11 | // }
12 |
13 | render() {
14 | let {list}=this.props;
15 | console.log(list)
16 | return (
17 |
18 |
44 | );
45 | }
46 | componentDidMount() {
47 | this.carData()
48 | }
49 | carData() {
50 | let {updata}=this.props;
51 | axios.get('/carList').then(res => {
52 | updata(res.data.data)
53 | })
54 | }
55 | }
56 | const mapStateToProps = (state) => {
57 | return state.List;
58 | }
59 | const mapDispatchToProps = (dispatch) => {
60 | return {
61 | updata(payload) {
62 | dispatch({ type: 'UPDATA', payload })
63 | }
64 | }
65 | }
66 | export default connect(mapStateToProps,mapDispatchToProps)(BuyCar);
--------------------------------------------------------------------------------
/src/day14/container/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {BrowserRouter} from 'react-router-dom';
3 | import RouterView from '../router/index';
4 | import Router from '../router/config';
5 | import '../common/style.css';
6 | class Index extends Component {
7 | render() {
8 | return (
9 | { 19 | this.props.history.push('/buyCar/order') 20 | }}>排序
21 |
22 | {
23 | list.length && list.map(v => {
24 | return v.map((item,i) => {
25 | return (
43 |
26 |
)
38 | }
39 | )
40 | })
41 | }
42 | {item.carClass}
27 |-
28 | {
29 | item.carList.map((val,idx)=>{
30 | return (
31 |
- {val.carName}{val.price} 32 | ) 33 | }) 34 | } 35 | 36 |
9 |
12 | );
13 | }
14 | handleMinus = () => {
15 | this.props.list.forEach((v,i)=>{
16 | console.log(v)
17 | })
18 | this.props.history.push('/buyCar/content')
19 | }
20 | handlePlus = () => {
21 | this.props.history.push('/buyCar/content')
22 | }
23 |
24 |
25 | }
26 |
27 | const mapStateToProps = (state) => {
28 | return state.List;
29 | }
30 | const mapDispatchToProps = (dispatch) => {
31 | return {
32 | updata(payload) {
33 | dispatch({ type: 'UPDATA', payload })
34 | }
35 | }
36 | }
37 | export default connect(mapStateToProps, mapDispatchToProps)(Order);
--------------------------------------------------------------------------------
/src/day14/router/config.js:
--------------------------------------------------------------------------------
1 | import Content from '../container/content';
2 | import Order from '../container/order';
3 | export default {
4 | routers: [{
5 | path: '/',
6 | redirect: '/buyCar/content',
7 | },
8 | {
9 | path: '/buyCar/content',
10 | component: Content
11 | }, {
12 | path: '/buyCar/order',
13 | component: Order
14 | }
15 | ]
16 | }
--------------------------------------------------------------------------------
/src/day14/router/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {Switch,Redirect,Route} from 'react-router-dom';
3 | class RouterView extends Component {
4 | render() {
5 | let {routes}=this.props;
6 | let redirectDom=routes&&routes.length&&routes.filter(item=>item.redirect);
7 | let renderRedirect=redirectDom&&redirectDom.length&&redirectDom.map((v,i)=>(
8 | { this.handleMinus() }}>从高到低
10 |{ this.handlePlus() }}>从低到高
11 |
8 |
11 | );
12 | }
13 | }
14 |
15 | export default Index;
--------------------------------------------------------------------------------
/src/day15/container/list.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import axios from 'axios';
4 | import '../mock/mock';
5 | class List extends Component {
6 | constructor() {
7 | super();
8 | this.state = {
9 | sum: 0,
10 | total: 0
11 | }
12 | }
13 |
14 | render() {
15 | const { list, updata } = this.props;
16 | return (
17 | 购物车
9 |
18 |
62 | );
63 | }
64 | handleCheck = () => {
65 | const { list, updata } = this.props;
66 | let listCheck = list.filter(v => v.isCheck);
67 | if (listCheck.length === 4) {
68 | return this.refs.all.checked = true
69 | }
70 | list.forEach((v, i) => {
71 | if (!v.isCheck) {
72 | return this.refs.all.checked = false;
73 | }
74 | })
75 | }
76 | componentDidMount() {
77 | let { updata } = this.props
78 | axios.get('/shopCar').then(res => {
79 | updata(res.data.data)
80 | })
81 | this.handleCheck()
82 | this.computed();
83 | }
84 | handleMinus = (i) => {
85 | const { list, updata } = this.props;
86 | if (list[i].num < 1) return;
87 | list[i].num--;
88 | this.handleCheck()
89 | this.computed();
90 | updata(list)
91 |
92 | }
93 | handlePlus = (i) => {
94 | const { list, updata } = this.props;
95 | if (list[i].num > 9) return;
96 | list[i].num++;
97 | this.computed();
98 | updata(list)
99 |
100 | }
101 | computed() {
102 | let { list } = this.props;
103 | let sum = 0, num = 0;
104 | list.forEach(item => {
105 | if (item.isCheck) {
106 | sum += item.num * item.money;
107 | num += item.num
108 | }
109 | })
110 | this.setState({
111 | sum, num
112 | })
113 | }
114 | }
115 | const mapStateToProps = (state) => {
116 | return state.List;
117 | }
118 | const mapDispatchToProps = (dispatch) => {
119 | return {
120 | updata(payload) {
121 | dispatch({ type: 'UPDATA', payload })
122 | }
123 | }
124 | }
125 | export default connect(mapStateToProps, mapDispatchToProps)(List);
--------------------------------------------------------------------------------
/src/day15/mock/mock.js:
--------------------------------------------------------------------------------
1 | import Mock from 'mockjs';
2 | let data=[{
3 | name: "徐福记沙琪玛",
4 | num: 0,
5 | isCheck: false,
6 | money: "15"
7 | },
8 | {
9 | name: "徐福记酥心糖",
10 | num: 0,
11 | isCheck: false,
12 | money: "24"
13 | }, {
14 | name: "徐福记牛轧糖",
15 | num: 0,
16 | isCheck: false,
17 | money: "51"
18 | }, {
19 | name: "徐福记爆汁糖",
20 | num: 0,
21 | isCheck: false,
22 | money: "21"
23 | }]
24 |
25 | Mock.mock('/shopCar',()=>{
26 | return {
27 | code:1,
28 | data
29 | }
30 | })
--------------------------------------------------------------------------------
/src/day15/store/action/list.js:
--------------------------------------------------------------------------------
1 | const defaultState = {
2 | list: []
3 | }
4 | const listAction = (state = defaultState, action) => {
5 | const {
6 | payload,
7 | type
8 | } = action;
9 | switch (type) {
10 | case 'UPDATA':
11 | return {
12 | ...state,
13 | list: [...payload]
14 | };
15 |
16 | default:
17 | return state;
18 | }
19 | }
20 | export default listAction;
--------------------------------------------------------------------------------
/src/day15/store/index.js:
--------------------------------------------------------------------------------
1 | import {combineReducers,createStore} from 'redux';
2 | import List from './action/list';
3 | const stores=combineReducers({
4 | List
5 | });
6 | export let store=createStore(stores);
--------------------------------------------------------------------------------
/src/day6/common/context.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default React.createContext();
--------------------------------------------------------------------------------
/src/day6/container/child1.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Grandson from './grandson';
3 | class Child extends Component {
4 | render() {
5 | return (
6 |
19 |
58 | 20 | { 21 | list.forEach(item => { 22 | item.isCheck = e.target.checked; 23 | }) 24 | this.handleCheck() 25 | this.computed(); 26 | 27 | updata(list); 28 | }} /> 29 | 30 |
31 | 32 | {list && list.length && list.map((v, i) => ( 33 |
34 | {
35 | list[i].isCheck = e.target.checked;
36 | this.handleCheck()
37 | this.computed();
38 | updata(list);
39 | }} checked={v.isCheck} />
40 |
55 |
56 | ))}
57 | -
41 |
- 42 | 我是图片 43 | 44 |
-
45 |
{v.name}
46 |价格：{v.money}￥
47 |48 | this.handleMinus(i)}>- 49 | {v.num} 50 | this.handlePlus(i)}>+ 51 |52 |
53 |
59 | 总价：{this.state.sum}
60 | 总件数：{this.state.num}
61 |
7 | {this.props.data}
8 |
9 | 10 |
11 |
12 | );
13 | }
14 | changeSelf=()=>{
15 | this.props.changeSelf('我是被本身组件修改的')
16 | }
17 | }
18 |
19 | export default Child;
--------------------------------------------------------------------------------
/src/day6/container/child2.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class Child2 extends Component {
4 | render() {
5 | return (
6 | 9 | 10 |
7 |
8 |
9 | );
10 | }
11 | }
12 |
13 | export default Child2;
--------------------------------------------------------------------------------
/src/day6/container/grandson.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import ReGrandson from './reGrandson';
3 | class Grandson extends Component {
4 | render() {
5 | return (
6 |
7 |
8 |
10 | );
11 | }
12 | changeParent=()=>{
13 | this.props.changeParent('我是被子组件修改的')
14 | }
15 | }
16 |
17 | export default Grandson;
--------------------------------------------------------------------------------
/src/day6/container/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Child from './child1';
3 | import Child2 from './child2';
4 | import Context from '../common/context';
5 | class Index extends Component {
6 | constructor(props) {
7 | super(props);
8 | this.state={
9 | data:'我是子组件中要显示的数据'
10 | }
11 | }
12 |
13 | render() {
14 | return (
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | );
23 | }
24 | changeChild=()=>{
25 | this.setState({
26 | data:'我是被父组件修改的'
27 | })
28 | }
29 | changeContext=()=>{
30 | this.setState({
31 | data:'我是通过context修改的'
32 | })
33 | }
34 | changeData=(data)=>{
35 | this.setState({
36 | data
37 | })
38 | }
39 | }
40 |
41 | export default Index;
--------------------------------------------------------------------------------
/src/day6/container/reGrandson.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Context from '../common/context';
3 | class ReGrandson extends Component {
4 | render() {
5 | return (
6 |
7 |
8 | {
9 | (obj)=>{
10 | console.log(obj);
11 | return (
12 |
21 |
22 |
23 | );
24 | }
25 | }
26 |
27 | export default ReGrandson;
--------------------------------------------------------------------------------
/src/day7/common/context.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default React.createContext();
--------------------------------------------------------------------------------
/src/day7/container/body.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import BodyChild from './bodyChild';
3 | class Body extends Component {
4 | render() {
5 | // let { data } = this.props;
6 | return (
7 |
13 | {obj.data}
14 |
15 | 16 |
17 | )
18 | }
19 | }
20 | 15 | 16 |
8 | {/*
17 | );
18 | }
19 | }
20 |
21 | export default Body;
--------------------------------------------------------------------------------
/src/day7/container/bodyChild.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Context from '../common/context';
3 | class BodyChild extends Component {
4 | render() {
5 | return (
6 | -
9 | {
10 | data && data.map(v => (
11 |
- {v} 12 | )) 13 | } 14 |
7 |
8 | {
9 | (obj)=>{
10 | return
18 |
19 | );
20 | }
21 | }
22 |
23 | export default BodyChild;
--------------------------------------------------------------------------------
/src/day7/container/head.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class Head extends Component {
4 | render() {
5 | const {data,handleChange}=this.props;
6 | return (
7 | -
11 | {obj&&obj.map(v=>(
12 |
- {v} 13 | ))} 14 |
8 | {data&&data.map((v,i)=>(
9 | handleChange(i)} key={i}>{v}
10 | ))}
11 |
12 | );
13 | }
14 | }
15 |
16 | export default Head;
--------------------------------------------------------------------------------
/src/day7/container/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Head from './head';
3 | import Body from './body';
4 | import Context from '../common/context';
5 | class Index extends Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | list: {
10 | '小学': ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
11 | '初中': ['初一', '初二', '初三'],
12 | '高中': ['高一', '高二', '高三'],
13 | '大学': ['大一', '大二', '大三', '大四']
14 | },
15 | defaultIndex: 0
16 | }
17 | }
18 | render() {
19 | const { list, defaultIndex } = this.state;
20 | return (
21 |
22 |
23 |
24 |
25 |
26 |
27 | );
28 | }
29 | handleChange = (i) => {
30 | this.setState({
31 | defaultIndex: i
32 | })
33 | }
34 | }
35 |
36 | export default Index;
--------------------------------------------------------------------------------
/src/day7/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
8 | home主页面
9 |
10 |
12 |
13 | )
14 | }
15 | }
16 |
17 | export default Home
--------------------------------------------------------------------------------
/src/day7_1/view/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import {connect} from '../utils/connect';
3 | class Index extends Component {
4 | render () {
5 | console.log(this.props) // index对应的数据
6 | return (
7 |
8 |
11 | )
12 | }
13 | }
14 | export default connect((state)=>state["indexData"])(Index)
--------------------------------------------------------------------------------
/src/day8/container/children.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 |
3 | class Children extends PureComponent {
4 | render() {
5 | return (
6 | {this.props.name}
9 |{this.props.content}
10 |
7 | {this.props.data}
8 |
9 | );
10 | }
11 | }
12 |
13 | export default Children;
--------------------------------------------------------------------------------
/src/day8/container/detail.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class Detail extends Component {
4 | render() {
5 | const { children } = this.props
6 | return (
7 |
8 | {
9 | // children(35)
10 | }
11 | {
12 | React.Children.map(children, (obj) => {
13 | console.log(obj)
14 | return obj
15 | })
16 | }
17 |
18 | );
19 | }
20 | }
21 |
22 | export default Detail;
--------------------------------------------------------------------------------
/src/day8/container/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import Detail from './detail';
4 | import Children from './children';
5 | class Index extends Component {
6 | constructor(props) {
7 | super(props);
8 | this.state={
9 | data: "我是更新前的数据"
10 | }
11 | }
12 | static defaultProps = {
13 | arr: [1, 3, 5, 7, 9],
14 | obj: { name: "liangyuan", age: "19" },
15 | bool: true,
16 | func: () => { return 123 },
17 | num: 333,
18 | str: "liangyuan",
19 | anything: "anything",
20 | ele: 元素,
21 | enums: 'my',
22 | types: { sometype: "sometype" },
23 | arrType: [2, 4, 6, 8, 0],
24 | objType: { age: 19 },
25 | style: { color: "red", fontSize: 18 },
26 | any: 1999,
27 | // symbol:"."
28 |
29 | }
30 | static propTypes = {
31 | arr: PropTypes.array,//数组
32 | obj: PropTypes.object.isRequired,//对象(不能为空)
33 | bool: PropTypes.bool,//布尔值
34 | func: PropTypes.func,//函数
35 | num: PropTypes.number,//数组
36 | str: PropTypes.string,//字符串
37 | anything: PropTypes.node,//任意被渲染的事物
38 | ele: PropTypes.element,//元素
39 | enums: PropTypes.oneOf(['my', 'name', 'is', 'liangyuan']),//特定的值的任意一个
40 | types: PropTypes.oneOfType([
41 | PropTypes.array,
42 | PropTypes.object,
43 | PropTypes.number
44 | ]),//指定类型的任意一种
45 | arrType: PropTypes.arrayOf(PropTypes.number),//指定类型组成的数组
46 | objType: PropTypes.objectOf(PropTypes.number),//制定类型组成的对象
47 | style: PropTypes.shape({
48 | color: PropTypes.string,
49 | fontSize: PropTypes.number
50 | }),
51 | any: PropTypes.any.isRequired,//不为空的任意类型
52 | // symbol:PropTypes.symbol
53 | }
54 | render() {
55 | const { arr, str, num, bool, obj, func, anything, ele, enums, types, arrType, objType, style, any } = this.props;
56 | console.log("bool", bool)
57 | return (
58 |
59 |
74 |
83 |
92 | );
93 | }
94 | }
95 |
96 | export default Index;
--------------------------------------------------------------------------------
/src/day8_1/common/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | padding:0;
3 | margin:0;
4 | list-style: none;
5 | text-decoration: none;
6 | box-sizing: border-box;
7 | }
8 | html,body,#app{
9 | height: 100%;
10 | width: 100%;
11 | }
12 | .box{
13 | padding:20px;
14 | }
15 |
16 | .info h3{
17 | text-align: center;
18 | }
19 | .info p{
20 | line-height: 50px;
21 | height: 50px;
22 | border-bottom: 1px solid #ccc;
23 | }
24 | .info b{
25 | display: inline-block;
26 | width: 80px;
27 | text-align: center;
28 | }
29 | .info input{
30 | border:0;
31 | width: 250px;
32 | height: 27px;
33 | line-height: 27px;
34 | outline: 0;
35 | }
36 | .info button{
37 | margin:5px 0;
38 | height: 30px;
39 | line-height: 30px;
40 | width: 100%;
41 | outline: 0;
42 | border: 0;
43 | background: skyblue;
44 | color: #fff;
45 | }
46 | .list p{
47 | float: right;
48 | }
--------------------------------------------------------------------------------
/src/day8_1/container/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import List from './list';
3 | import SetInfo from './setInfo';
4 | import '../common/style.css';
5 | let arr = [];
6 | class Index extends Component {
7 |
8 | constructor(props) {
9 | super(props);
10 | this.state = {
11 | list: [],
12 | setInfo:{}
13 | }
14 | }
15 |
16 | render() {
17 | let { list,setInfo } = this.state;
18 | return (
19 | arr:{arr}
60 |str:{str}
61 |num:{num}
62 |obj:{obj.name} {obj.age}
63 |func:{func()}
64 |bool:{bool ? 'true' : 'false'}
65 |anything:{anything}
66 |ele:{ele}
67 |enum:{enums}
68 |types:{types.sometype}
69 |arrType:{arrType}
70 |objType:{objType.age}
71 |style:颜色：{style.color}字体大小：{style.fontSize}px
72 |any:{any}
73 |1
75 |2
76 |3
77 | { 78 | // (num)=>{ 79 | // return num 80 | // } 81 | } 82 |
20 |
21 |
23 | );
24 | }
25 | deleteInfo=(idx)=>{
26 | console.log(idx);
27 | let {list}=this.state;
28 | list.splice(idx,1)
29 | this.setState({
30 | list
31 | })
32 | }
33 | saveInfo = (obj) => {
34 | arr.push(obj)
35 | this.setState({
36 | list: arr
37 | })
38 | }
39 | getInfo = (val) => {
40 | this.setState({
41 | setInfo:val
42 | })
43 | }
44 | }
45 |
46 | export default Index;
--------------------------------------------------------------------------------
/src/day8_1/container/list.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class List extends Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = {
7 | defaultText: ["添加收获地址+"]
8 | }
9 | }
10 | render() {
11 | let { list, deleteInfo, getInfo } = this.props;
12 | const { defaultText } = this.state;
13 | return (
14 |
15 | {
16 | list.length ? list.map((v, i) => {
17 | return
28 | );
29 | }
30 | }
31 |
32 | export default List;
--------------------------------------------------------------------------------
/src/day8_1/container/setInfo.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | let i = 0;
3 | class SetInfo extends Component {
4 |
5 | render() {
6 | return (
7 |
18 |
24 | }) : {v.name}
19 | 手机号：{v.phone} 20 | 地址：{v.address} 21 |{ getInfo(v) }}>修改
22 |{ deleteInfo(i) }}>删除
23 |{defaultText}
25 | 26 | } 27 |
8 |
14 | );
15 | }
16 |
17 | componentWillReceiveProps(nextProps) {
18 | let { list } = this.props;
19 | if ((nextProps.setInfo.name && nextProps.setInfo.phone && nextProps.setInfo.address) !== undefined) {
20 | this.refs.name.value = nextProps.setInfo.name;
21 | this.refs.phone.value = nextProps.setInfo.phone;
22 | this.refs.address.value = nextProps.setInfo.address;
23 | // for (let t = 0, len = list.length; t < len; t++) {
24 | // if (list[t].id === nextProps.setInfo.id) {
25 | // list[i] = nextProps.setInfo
26 | // }
27 | // }
28 | }
29 | // for (let t = 0, len = list.length; t < len; t++) {
30 | // if (list[t].id === nextProps.setInfo.id) {
31 | // list[i] = nextProps.setInfo
32 | // }
33 | // }
34 | }
35 |
36 | handleInFo = () => {
37 | let nameVal = this.refs.name.value;
38 | let phoneVal = this.refs.phone.value;
39 | let addressVal = this.refs.address.value;
40 | this.props.saveInfo({ name: nameVal, phone: phoneVal, address: addressVal, id: i++ });
41 | this.refs.name.value = "";
42 | this.refs.phone.value = "";
43 | this.refs.address.value = "";
44 | }
45 |
46 | }
47 |
48 | export default SetInfo;
--------------------------------------------------------------------------------
/src/day9/container/binghongcha.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {withRouter} from 'react-router-dom';
3 | class Binghongcha extends Component {
4 | render() {
5 | console.log(this.props);
6 | return (
7 | 收获地址
9 |收货人
10 |联系电话
11 |详细地址
12 | 13 |
8 | 冰红茶
9 |
10 | );
11 | }
12 | }
13 |
14 | export default withRouter(Binghongcha);
--------------------------------------------------------------------------------
/src/day9/container/child1.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Route } from 'react-router-dom';
3 | import Xuebi from './xuebi';
4 | import Kele from './kele';
5 | import Binghongcha from './binghongcha';
6 |
7 | class Child1 extends Component {
8 | render() {
9 | return (
10 |
11 |
12 |
13 |
14 |
18 | );
19 | }
20 | handlePath = (path) => {
21 | let { push } = this.props.history;
22 | push("/child1/" + path)
23 | }
24 | }
25 |
26 | export default Child1;
--------------------------------------------------------------------------------
/src/day9/container/child2.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class Child2 extends Component {
4 | render() {
5 | console.log(this.props)
6 | return (
7 |
8 |
10 | );
11 | }
12 | }
13 |
14 | export default Child2;
--------------------------------------------------------------------------------
/src/day9/container/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { BrowserRouter, Route ,Redirect} from "react-router-dom";
3 | import Child1 from './child1';
4 | import Child2 from './child2';
5 | class Index extends Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | iptVal: "默认值"
10 | }
11 | }
12 | render() {
13 | return (
14 | this.props.history.push('/child1')}>Child2
9 |
16 |
18 |
19 | {/*
24 |
25 |
20 |
21 |
22 |
*/}
23 |
7 | 可乐
8 |
9 | );
10 | }
11 | }
12 |
13 | export default Kele;
--------------------------------------------------------------------------------
/src/day9/container/xuebi.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class Xuebi extends Component {
4 | render() {
5 | return (
6 |
7 | 雪碧
8 |
9 | );
10 | }
11 | }
12 |
13 | export default Xuebi;
--------------------------------------------------------------------------------
/src/day9_1/common/css/common.css:
--------------------------------------------------------------------------------
1 | /*
2 | * @description:Common usage Styles
3 | * @author:HaoNan
4 | * @update:HaoNan (2015-08-1 8:30)
5 | */
6 | @-webkit-viewport {
7 | width: device-width;
8 | }
9 |
10 | @-moz-viewport {
11 | width: device-width;
12 | }
13 |
14 | @-ms-viewport {
15 | width: device-width;
16 | }
17 |
18 | @-o-viewport {
19 | width: device-width;
20 | }
21 |
22 | @viewport {
23 | width: device-width;
24 | }
25 |
26 | body {
27 | font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif;
28 | color: #3b3d3e;
29 | }
30 |
31 | a {
32 | color: #666;
33 | }
34 |
35 | a:hover, a:focus {
36 | color: #666;
37 | text-decoration: none;
38 | }
39 |
40 | .block {
41 | display: block;
42 | }
43 |
44 | .float-left {
45 | float: left;
46 | }
47 |
48 | .float-right {
49 | float: right;
50 | }
51 |
52 | .float-none {
53 | float: none;
54 | }
55 |
56 | .margin-center {
57 | margin-left: auto;
58 | margin-right: auto;
59 | display: table;
60 | width: auto;
61 | }
62 |
63 | .text-justify {
64 | text-align: justify;
65 | }
66 |
67 | .text-underline {
68 | text-decoration: underline;
69 | }
70 |
71 | .text-top {
72 | vertical-align: top;
73 | }
74 |
75 | .text-middle {
76 | vertical-align: middle;
77 | }
78 |
79 | .text-bottom {
80 | vertical-align: bottom;
81 | }
82 |
83 | .text-nobr {
84 | white-space: nowrap;
85 | overflow: hidden;
86 | text-overflow: ellipsis;
87 | }
88 |
89 | .text-nowrap {
90 | display: -webkit-box;
91 | overflow: hidden;
92 | text-overflow: ellipsis;
93 | -webkit-box-orient: vertical;
94 | -webkit-line-clamp: 2;
95 | }
96 |
97 | .f0 {
98 | font-size: 0;
99 | }
100 |
101 | .f9 {
102 | font-size: .09rem;
103 | }
104 |
105 | .f10 {
106 | font-size: .1rem;
107 | }
108 |
109 | .f12 {
110 | font-size: .12rem;
111 | }
112 |
113 | .f14 {
114 | font-size: .14rem;
115 | }
116 |
117 | .f16 {
118 | font-size: .16rem;
119 | }
120 |
121 | .f18 {
122 | font-size: .18rem;
123 | }
124 |
125 | .f20 {
126 | font-size: .2rem;
127 | }
128 |
129 | .f24 {
130 | font-size: .24rem;
131 | }
132 |
133 | .f26 {
134 | font-size: .26rem;
135 | }
136 |
137 | .f32 {
138 | font-size: .32rem;
139 | }
140 |
141 | .f36 {
142 | font-size: .36rem;
143 | }
144 |
145 | .pos-relative {
146 | position: relative;
147 | }
148 |
149 | .pos-absolute {
150 | position: absolute;
151 | }
152 |
153 | .pos-static {
154 | position: static;
155 | }
156 |
157 | .text-dark {
158 | color: #000;
159 | }
160 |
161 | .text-light-dark {
162 | color: #666;
163 | }
164 |
165 | .text-jet-dark {
166 | color: #333;
167 | }
168 |
169 | .text-white, a.text-white {
170 | color: #fff;
171 | }
172 |
173 | .text-red, a.text-red {
174 | color: #ff4136;
175 | }
176 |
177 | .text-light-red, a.text-light-red {
178 | color: #f74d4d;
179 | }
180 |
181 | .text-blue, a.text-blue {
182 | color: #006666;
183 | }
184 |
185 | .text-highlight-blue, a.text-highlight-blue {
186 | color: #5badab;
187 | }
188 |
189 | .text-high-blue, a.text-high-blue {
190 | color: #4c6aae;
191 | }
192 |
193 | a.text-light-blue, .text-light-blue {
194 | color: #89afc3;
195 | }
196 |
197 | .text-orange, a.text-orange {
198 | color: #fa8100;
199 | }
200 |
201 | .text-dark-orange {
202 | color: #ff7200;
203 | }
204 |
205 | .text-gray, a.text-gray {
206 | color: #454545;
207 | }
208 |
209 | .text-light-gray {
210 | color: #a3a3a3;
211 | }
212 |
213 | .txt-idt1 {
214 | text-indent: 1rem;
215 | }
216 |
217 | .txt-idt2 {
218 | text-indent: 2rem;
219 | }
220 |
221 | .n {
222 | font-weight: normal;
223 | font-style: normal;
224 | }
225 |
226 | .b {
227 | font-weight: bold;
228 | }
229 |
230 | .i {
231 | font-style: italic;
232 | }
233 |
234 | .wf {
235 | width: 100%;
236 | }
237 |
238 | .hf {
239 | height: 100%;
240 | }
241 |
242 | .nowrap {
243 | white-space: nowrap;
244 | }
245 |
246 | .bk {
247 | word-wrap: break-word;
248 | }
249 |
250 | .rel {
251 | position: relative;
252 | }
253 |
254 | .abs {
255 | position: absolute;
256 | }
257 |
258 | .bg-navy {
259 | background-color: #001f3f;
260 | }
261 |
262 | .bg-blue {
263 | background-color: #0074d9;
264 | }
265 |
266 | .bg-aqua {
267 | background-color: #7fdbff;
268 | }
269 |
270 | .bg-teal {
271 | background-color: #39cccc;
272 | }
273 |
274 | .bg-olive {
275 | background-color: #3d9970;
276 | }
277 |
278 | .bg-green {
279 | background-color: #2ecc40;
280 | }
281 |
282 | .bg-lime {
283 | background-color: #01ff70;
284 | }
285 |
286 | .bg-yellow {
287 | background-color: #ffdc00;
288 | }
289 |
290 | .bg-orange {
291 | background-color: #ff851b;
292 | }
293 |
294 | .bg-danger {
295 | background-color: #ff4136;
296 | }
297 |
298 | .bg-fuchsia {
299 | background-color: #f012be;
300 | }
301 |
302 | .bg-purple {
303 | background-color: #b10dc9;
304 | }
305 |
306 | .bg-maroon {
307 | background-color: #85144b;
308 | }
309 |
310 | .bg-white {
311 | background-color: #ffffff;
312 | }
313 |
314 | .bg-gray {
315 | background-color: #aaaaaa;
316 | }
317 |
318 | .bg-light-gray {
319 | background-color: #f0efed;
320 | }
321 |
322 | .bg-silver {
323 | background-color: #dddddd;
324 | }
325 |
326 | .bg-black {
327 | background-color: #111111;
328 | }
329 |
330 | .bg-white {
331 | background-color: #fff;
332 | }
333 |
334 | .bg-none {
335 | background-image: none !important;
336 | }
337 |
338 | .bgfb {
339 | background-color: #fbfbfb;
340 | }
341 |
342 | .bgf5 {
343 | background-color: #f5f5f5;
344 | }
345 |
346 | .bgf0 {
347 | background-color: #f0f0f0;
348 | }
349 |
350 | .bgeb {
351 | background-color: #ebebeb;
352 | }
353 |
354 | .bge0 {
355 | background-color: #e0e0e0;
356 | }
357 |
358 | .bd1 {
359 | border: 1px solid #ddd;
360 | }
361 |
362 | .bd2 {
363 | border: 2px solid #ddd;
364 | }
365 |
366 | .bd3 {
367 | border: 3px solid #ddd;
368 | }
369 |
370 | .bd0 {
371 | border-width: 0;
372 | }
373 |
374 | .bdl0 {
375 | border-left: 0 !important;
376 | }
377 |
378 | .bdt1 {
379 | border-top: 1px solid #ccc;
380 | }
381 |
382 | .bdr1 {
383 | border-right: 1px solid #ccc;
384 | }
385 |
386 | .bdl1 {
387 | border-left: 1px solid #ccc;
388 | }
389 |
390 | .bdb1 {
391 | border-bottom: 1px solid #eee;
392 | }
393 |
394 | .ml0 {
395 | margin-left: 0;
396 | }
397 |
398 | .mr0 {
399 | margin-right: 0;
400 | }
401 |
402 | .mt0 {
403 | margin-top: 0;
404 | }
405 |
406 | .mb0 {
407 | margin-bottom: 0;
408 | }
409 |
410 | .pl0 {
411 | padding-left: 0;
412 | }
413 |
414 | .pr0 {
415 | padding-right: 0;
416 | }
417 |
418 | .pt0 {
419 | padding-top: 0;
420 | }
421 |
422 | .pb0 {
423 | padding-bottom: 0;
424 | }
425 |
426 | .mlf3 {
427 | margin-left: -3px;
428 | }
429 |
430 | .mlf5 {
431 | margin-left: -5px;
432 | }
433 |
434 | .mlf10 {
435 | margin-left: -10px;
436 | }
437 |
438 | .mrf15 {
439 | margin-right: -15px;
440 | }
441 |
442 | .mlrf15 {
443 | margin-left: -15px !important;
444 | margin-right: -15px !important;
445 | }
446 |
447 | .mtf3 {
448 | margin-top: -3px;
449 | }
450 |
451 | .mtf5 {
452 | margin-top: -5px;
453 | }
454 |
455 | .mtf10 {
456 | margin-top: -10px;
457 | }
458 |
459 | .mtf15 {
460 | margin-top: -15px;
461 | }
462 | .mtf35 {
463 | margin-top: -35px;
464 | }
465 | .mt3 {
466 | margin-top: 3px;
467 | }
468 |
469 | .mt5 {
470 | margin-top: 5px;
471 | }
472 |
473 | .mt10 {
474 | margin-top: 10px;
475 | }
476 |
477 | .mt15 {
478 | margin-top: 15px;
479 | }
480 |
481 | .mt20 {
482 | margin-top: 20px;
483 | }
484 |
485 | .mt25 {
486 | margin-top: 25px;
487 | }
488 |
489 | .mt30 {
490 | margin-top: 30px;
491 | }
492 |
493 | .mt35 {
494 | margin-top: 35px;
495 | }
496 |
497 | .mt50 {
498 | margin-top: 50px;
499 | }
500 |
501 | .mb3 {
502 | margin-bottom: 3px;
503 | }
504 |
505 | .mb5 {
506 | margin-bottom: 5px;
507 | }
508 |
509 | .mb10 {
510 | margin-bottom: 10px;
511 | }
512 |
513 | .mb15 {
514 | margin-bottom: 15px;
515 | }
516 |
517 | .mb20 {
518 | margin-bottom: 20px;
519 | }
520 |
521 | .ml3 {
522 | margin-left: 3px;
523 | }
524 |
525 | .ml5 {
526 | margin-left: 5px;
527 | }
528 |
529 | .ml10 {
530 | margin-left: 10px;
531 | }
532 |
533 | .ml15 {
534 | margin-left: 15px;
535 | }
536 |
537 | .ml20 {
538 | margin-left: 20px;
539 | }
540 |
541 | .mr3 {
542 | margin-right: 3px;
543 | }
544 |
545 | .mr5 {
546 | margin-right: 5px;
547 | }
548 |
549 | .mr10 {
550 | margin-right: 10px;
551 | }
552 |
553 | .mr15 {
554 | margin-right: 15px;
555 | }
556 |
557 | .mr20 {
558 | margin-right: 20px;
559 | }
560 |
561 | .mr30 {
562 | margin-right: 30px;
563 | }
564 |
565 | .mr50 {
566 | margin-right: 50px;
567 | }
568 |
569 | .mlr1 {
570 | margin-left: 1px;
571 | margin-right: 1px;
572 | }
573 |
574 | .mlr3 {
575 | margin-left: 3px;
576 | margin-right: 3px;
577 | }
578 |
579 | .mlr5 {
580 | margin-left: 5px;
581 | margin-right: 5px;
582 | }
583 |
584 | .mlr10 {
585 | margin-left: 10px;
586 | margin-right: 10px;
587 | }
588 |
589 | .p1 {
590 | padding: 1px;
591 | }
592 |
593 | .p3 {
594 | padding: 3px;
595 | }
596 |
597 | .p5 {
598 | padding: 5px;
599 | }
600 |
601 | .p10 {
602 | padding: 10px;
603 | }
604 |
605 | .pt3 {
606 | padding-top: 3px;
607 | }
608 |
609 | .pt5 {
610 | padding-top: 5px;
611 | }
612 |
613 | .pt10 {
614 | padding-top: 10px;
615 | }
616 |
617 | .pt15 {
618 | padding-top: 15px;
619 | }
620 |
621 | .pt20 {
622 | padding-top: 20px;
623 | }
624 |
625 | .pt30 {
626 | padding-top: 30px;
627 | }
628 |
629 | .pt50 {
630 | padding-top: 50px;
631 | }
632 |
633 | .pb3 {
634 | padding-bottom: 3px;
635 | }
636 |
637 | .pb5 {
638 | padding-bottom: 5px;
639 | }
640 |
641 | .pb10 {
642 | padding-bottom: 10px;
643 | }
644 |
645 | .pb15 {
646 | padding-bottom: 15px;
647 | }
648 |
649 | .pb20 {
650 | padding-bottom: 20px;
651 | }
652 |
653 | .pb30 {
654 | padding-bottom: 30px;
655 | }
656 |
657 | .pb50 {
658 | padding-bottom: 50px;
659 | }
660 |
661 | .pl3 {
662 | padding-left: 3px;
663 | }
664 |
665 | .pl5 {
666 | padding-left: 5px;
667 | }
668 |
669 | .pl10 {
670 | padding-left: 10px !important;
671 | }
672 |
673 | .pl15 {
674 | padding-left: 15px;
675 | }
676 |
677 | .pl20 {
678 | padding-left: 20px;
679 | }
680 |
681 | .pl25 {
682 | padding-left: 25px;
683 | }
684 |
685 | .pl30 {
686 | padding-left: 30px;
687 | }
688 |
689 | .pr3 {
690 | padding-right: 3px;
691 | }
692 |
693 | .pr5 {
694 | padding-right: 5px;
695 | }
696 |
697 | .pr10 {
698 | padding-right: 10px !important;
699 | }
700 |
701 | .pr15 {
702 | padding-right: 15px;
703 | }
704 |
705 | .pr20 {
706 | padding-right: 20px;
707 | }
708 |
709 | .pr30 {
710 | padding-right: 30px;
711 | }
712 |
713 | .pr50 {
714 | padding-right: 50px;
715 | }
716 |
717 | .swiper-pagination-bullet-active {
718 | background-color: #666;
719 | }
720 |
721 | /*# sourcremappingURL=common.css.map */
722 |
--------------------------------------------------------------------------------
/src/day9_1/common/css/reset.css:
--------------------------------------------------------------------------------
1 | body,
2 | h1,
3 | h2,
4 | h3,
5 | h4,
6 | p,
7 | ul,
8 | ol,
9 | dl,
10 | dd,
11 | textarea,
12 | button {
13 | margin: 0;
14 | padding: 0;
15 | }
16 |
17 | li {
18 | list-style: none;
19 | }
20 |
21 | body,
22 | h1,
23 | h2,
24 | h3,
25 | h4,
26 | h5,
27 | h6,
28 | p,
29 | ul,
30 | ol,
31 | li,
32 | dl,
33 | dt,
34 | dd,
35 | a,
36 | textarea,
37 | input,
38 | button,
39 | span,
40 | em,
41 | strong,
42 | img,
43 | div {
44 | -webkit-touch-callout: none;
45 | -moz-touch-callout: none;
46 | -ms-touch-callout: none;
47 | touch-callout: none;
48 | -webkit-tap-highlight-color: transparent;
49 | -moz-tap-highlight-color: transparent;
50 | -ms-tap-highlight-color: transparent;
51 | tap-highlight-color: transparent;
52 | }
53 |
54 | input[type=text],
55 | input[type=button],
56 | input[type=password],
57 | input[type=telphone],
58 | input[type=search],
59 | textarea,
60 | button {
61 | outline: 0 none;
62 | -webkit-appearance: none;
63 | }
64 |
65 | textarea {
66 | resize: none;
67 | }
68 |
69 | img {
70 | border: none;
71 | }
72 |
73 | a {
74 | text-decoration: none;
75 | }
76 |
77 | html {
78 | font-size:625%;
79 | -webkit-text-size-adjust: 100%;
80 | -moz-text-size-adjust: 100%;
81 | -ms-text-size-adjust: 100%;
82 | text-size-adjust: 100%;
83 | }
84 |
85 | /*# sourceMappingURL=reset.css.map */
86 |
87 |
88 |
89 |
--------------------------------------------------------------------------------
/src/day9_1/common/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | padding: 0;
4 | margin: 0;
5 | list-style: none;
6 | text-decoration: none;
7 | }
8 |
9 | html,
10 | body,
11 | #root,
12 | #App,
13 | section,
14 | .box {
15 | height: 100%;
16 | width: 100%;
17 | }
18 |
19 | .active {
20 | color: #31c27c !important;
21 | }
22 |
23 | .box {
24 | height: 100%;
25 | display: flex;
26 | margin-bottom: 50px;
27 | }
28 |
29 | .body {
30 | flex: 1;
31 | }
32 |
33 | nav {
34 | height: 45px;
35 | width: 100%;
36 | line-height: 45px;
37 | display: flex;
38 | justify-content: space-around;
39 | }
40 |
41 | .listItem dl {
42 | display: flex;
43 |
44 | }
45 |
46 | .listItem dt {
47 | margin: 10px;
48 | }
49 |
50 | .listItem img {
51 | height: 110px;
52 | width: 110px;
53 | margin: 10px;
54 | }
55 |
56 | .listItem dt>p,
57 | .songList {
58 | text-align: left;
59 | }
60 |
61 | .listItem dt>p {
62 | font-size: 16px;
63 | font-weight: bold;
64 | line-height: 19px;
65 | }
66 |
67 | .detailData img {
68 | width: 100%;
69 | }
70 |
71 | .mine {
72 | height: 100%;
73 | width: 100%;
74 | }
75 |
76 | .mine h3 {
77 | text-align: center;
78 | color: #f00;
79 | margin: 20px 0;
80 | }
81 | /*
82 | .mine p {
83 | text-align: center;
84 | margin: 2px;
85 |
86 | } */
87 |
88 | .mine p>input {
89 | height: 50px;
90 | width: 96%;
91 | /* border: 0; */
92 | /* border-radius: 5px; */
93 | outline: 0;
94 | padding-left: 20px;
95 | }
96 |
97 | .mine button {
98 | border: 0;
99 | outline: 0;
100 | border: 1px solid #f00;
101 | border-radius: 5px;
102 | background: red;
103 | color: #fff;
104 | height: 40px;
105 | width: 96%;
106 | margin-left: 2%;
107 | margin-top: 20px;
108 | }
109 |
110 | .else {
111 | display: flex;
112 | justify-content: space-between;
113 | padding: 10px;
114 | color: #f00;
115 | }
116 |
117 | .phone {
118 | font-size: 14px;
119 | color: #ccc;
120 | }
121 |
122 | .cinema {
123 | width: 100%;
124 | height: 100%;
125 | }
126 |
127 | .cinema h3,.mine h4 {
128 | height: 40px;
129 | background: #f00;
130 | color: #fff;
131 | text-align: center;
132 | line-height: 40px;
133 | }
134 |
135 | .search {
136 | height: 40px;
137 | width: 100%;
138 | background: #31c27c;
139 |
140 |
141 | }
142 |
143 | .search input,
144 | .search button {
145 | height: 40px;
146 | outline: 0;
147 |
148 | }
149 |
150 | .search input {
151 |
152 | width: 80%;
153 | }
154 |
155 | .search button {
156 | width: 20%;
157 | }
158 | .cinameList{
159 | padding:5px;
160 | }
161 | .cinameList>div {
162 | height: 120px;
163 | background: #f4f4f4;
164 | padding:5px;
165 | margin:2px 0;
166 | }
167 | .cinameList p{
168 | font-size: 13px;
169 | padding:5px 0;
170 | }
171 | .searchList{
172 | width: 80%;
173 | background: #fff;
174 | position: fixed;
175 | top:85px;
176 | left: 0;
177 |
178 | }
179 | .searchList li{
180 | height: 30px;
181 | line-height: 30px;
182 | padding-left: 10px;
183 | }
184 | .sort{
185 | display: flex;
186 | justify-content: space-around;
187 | }
188 | footer {
189 | height: 50px;
190 | line-height: 50px;
191 | display: flex;
192 | background: #f5f5f5;
193 | justify-content: space-around;
194 | position: fixed;
195 | bottom: 0;
196 | left: 0;
197 | width: 100%;
198 | }
--------------------------------------------------------------------------------
/src/day9_1/common/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thisislys/react-practice/c4c99bcb1ea0b8cd014e17080495bdad5d053ce0/src/day9_1/common/fonts/glyphicons-halflings-regular.eot
--------------------------------------------------------------------------------
/src/day9_1/common/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thisislys/react-practice/c4c99bcb1ea0b8cd014e17080495bdad5d053ce0/src/day9_1/common/fonts/glyphicons-halflings-regular.ttf
--------------------------------------------------------------------------------
/src/day9_1/common/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thisislys/react-practice/c4c99bcb1ea0b8cd014e17080495bdad5d053ce0/src/day9_1/common/fonts/glyphicons-halflings-regular.woff
--------------------------------------------------------------------------------
/src/day9_1/common/fonts/glyphicons-halflings-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thisislys/react-practice/c4c99bcb1ea0b8cd014e17080495bdad5d053ce0/src/day9_1/common/fonts/glyphicons-halflings-regular.woff2
--------------------------------------------------------------------------------
/src/day9_1/components/header/header.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class Header extends Component {
4 | render() {
5 | return QQ音乐
7 | 下载App
8 |
11 | {/*
13 |
14 |
16 |
17 |
18 | );
19 | }
20 | }
21 |
22 | export default App;
--------------------------------------------------------------------------------
/src/day9_1/container/taopiaopiao/cinema.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import axios from 'axios';
3 | let arr2;
4 | let arr1;
5 | class Cinema extends Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | data: [],
10 | search: []
11 | }
12 | }
13 | render() {
14 | const { data, search } = this.state;
15 | console.log(data)
16 | return (
17 |
18 |
42 | );
43 | }
44 | componentDidMount() {
45 | this.getList();
46 | }
47 | getList = () => {
48 | axios.get('./mock/cinema.json')
49 | .then((res) => {
50 | this.setState({
51 | data: res.data
52 | })
53 | })
54 | }
55 | handleChange = (e) => {
56 | if (!e.target.value) {
57 | (this.setState({
58 | search: []
59 | }))
60 | }
61 | }
62 | handleSearch = () => {
63 | let { data } = this.state;
64 | let word = this.refs.search.value;
65 | let len = data.length;
66 | let arr = [];
67 | let reg = new RegExp(word);
68 | for (var i = 0; i < len; i++) {
69 | if (data[i].nm.match(reg)) {
70 | arr.push(data[i]);
71 | this.setState({
72 | search: arr
73 | })
74 | }
75 | }
76 | }
77 | handleDistance = () => {
78 | const { data } = this.state;
79 | arr1=data;
80 | arr1.sort(this.sortDistance)
81 | console.log(arr1)
82 | this.setState({
83 | data:arr1
84 | })
85 | }
86 | sortDistance(a, b) {
87 | return a.distance - b.distance
88 | }
89 | handleMoney = () => {
90 | const { data } = this.state;
91 | arr2=data;
92 | arr2.sort(this.sortMoney)
93 | console.log(arr2)
94 | this.setState({
95 | data:arr2
96 | })
97 | }
98 | sortMoney(a, b) {
99 | return a.sellPrice - b.sellPrice
100 | }
101 | }
102 |
103 | export default Cinema;
--------------------------------------------------------------------------------
/src/day9_1/container/taopiaopiao/detail.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { withRouter } from 'react-router-dom';
3 | import axios from 'axios';
4 | class Detail extends Component {
5 | constructor(props) {
6 | super(props);
7 | this.state = {
8 | data: []
9 | }
10 | }
11 | render() {
12 | const { data } = this.state;
13 | const id = this.props.match.params.id;
14 | const newList = data.filter(item => {
15 | return item.id === parseInt(id)
16 | })
17 |
18 | console.log(newList)
19 | return (
20 | 影院
19 |
20 |
21 |
22 |
23 | 离我最近价钱最低
24 |
25 | {data && data.length && data.map(v => (
26 |
34 |
27 |
32 | ))}
33 | {v.nm}
28 |地址：{v.addr}
29 |距离：{v.distance}
30 |人均：{v.sellPrice}
31 |- {
35 | search && search.length ? search.map((v, i) => (
36 |
- {v.nm} 37 | )) : '' 38 | } 39 | 40 |
21 | {newList.length && (
22 |
33 | );
34 | }
35 |
36 | componentDidMount() {
37 | this.getList();
38 | }
39 | getList = () => {
40 | axios.get('./mock/data.json')
41 | .then((res) => {
42 | this.setState({
43 | data: res.data
44 | })
45 | })
46 |
47 |
48 | }
49 | }
50 |
51 | export default withRouter(Detail);
--------------------------------------------------------------------------------
/src/day9_1/container/taopiaopiao/hot.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { NavLink } from 'react-router-dom';
3 | import RouterView from '../../router/index';
4 | class Hot extends Component {
5 | render() {
6 | let { routes } = this.props;
7 | return (
8 |
23 |
24 |
30 | )
31 | }
32 | {newList[0].nm}
25 |上映时间：{newList[0].showInfo}
26 |主演：{newList[0].star}
27 |淘票票评分:{newList[0].sc}
28 |{newList[0].showInfo}
29 |
9 |
13 |
15 | );
16 | }
17 | }
18 |
19 | export default Hot;
--------------------------------------------------------------------------------
/src/day9_1/container/taopiaopiao/hotChild1.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import axios from 'axios';
3 | class HotChild1 extends Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = {
7 | data: []
8 | }
9 | }
10 | render() {
11 | const { data } = this.state;
12 | return (
13 |
14 | {data&&data.map((v,i)=>{
15 | return
23 | );
24 | }
25 | componentDidMount() {
26 | this.getList();
27 | }
28 | getList=()=>{
29 | axios.get('./mock/data.json')
30 | .then((res) => {
31 | this.setState({
32 | data: res.data
33 | })
34 | })
35 | }
36 | jump=(v,id)=>{
37 | this.props.history.push({pathname:"/detail/"+id,params:v})
38 | }
39 | }
40 |
41 | export default HotChild1;
42 |
--------------------------------------------------------------------------------
/src/day9_1/container/taopiaopiao/hotChild2.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import axios from 'axios';
3 | class HotChild2 extends Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = {
7 | data: []
8 | }
9 | }
10 | render() {
11 | const { data } = this.state;
12 | return (
13 | - this.jump(v,v.id)} key={i}>
16 |
{v.nm}
淘票票评分:{v.sc}
18 |主演:{v.star}
19 |{v.showInfo}
20 |
14 | {data&&data.map((v,i)=>{
15 | return
23 | );
24 | }
25 | componentDidMount() {
26 | this.getList();
27 | }
28 | getList=()=>{
29 | axios.get('./mock/data2.json')
30 | .then((res) => {
31 | this.setState({
32 | data: res.data
33 | })
34 | })
35 | }
36 | jump=(v,id)=>{
37 | this.props.history.push({pathname:"/detail/"+id,params:v})
38 | }
39 | }
40 |
41 | export default HotChild2;
42 |
--------------------------------------------------------------------------------
/src/day9_1/container/taopiaopiao/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { NavLink } from 'react-router-dom';
3 | import RouterView from '../../router/index';
4 | class Index extends Component {
5 | render() {
6 | let { routes } = this.props;
7 | return (
8 | - this.jump(v,v.id)} key={i}>
16 |
{v.nm}
淘票票评分:{v.sc}
18 |主演:{v.star}
19 |{v.showInfo}
20 |
9 |
17 | );
18 | }
19 | }
20 |
21 | export default Index;
--------------------------------------------------------------------------------
/src/day9_1/container/taopiaopiao/mine.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | let mine;
3 | class Mine extends Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = {
7 | mines: ''
8 | }
9 | }
10 |
11 | render() {
12 | let { mines } = this.state;
13 | return (
14 |
15 |
35 | );
36 | }
37 | componentDidMount() {
38 | this.info()
39 | }
40 | handleLogin = () => {
41 | let nameVal = this.refs.name.value;
42 | localStorage.setItem('mine', nameVal);
43 | this.info()
44 | }
45 | info() {
46 | mine = localStorage.getItem('mine');
47 | this.setState({
48 | mines: mine
49 | }, () => {
50 | console.log(this.state.mines)
51 | })
52 | }
53 | }
54 |
55 | export default Mine;
--------------------------------------------------------------------------------
/src/day9_1/router/config.jsx:
--------------------------------------------------------------------------------
1 | import App from '../container/taopiaopiao/index.jsx';
2 | import Hot from '../container/taopiaopiao/hot.jsx';
3 | import Cinema from '../container/taopiaopiao/cinema.jsx';
4 | import Mine from '../container/taopiaopiao/mine.jsx';
5 | import HotChild1 from '../container/taopiaopiao/hotChild1.jsx';
6 | import HotChild2 from '../container/taopiaopiao/hotChild2.jsx';
7 | import Detail from '../container/taopiaopiao/detail.jsx';
8 | const routes = [{
9 | path: '/app',
10 | component: App,
11 | children: [{
12 | path: '/app/hot',
13 | component: Hot,
14 |
15 | children: [{
16 | path: '/app/hot/hotChild1',
17 | component: HotChild1
18 |
19 | }, {
20 | path: '/app/hot/hotChild2',
21 | component: HotChild2
22 | }]
23 | },
24 | {
25 | path: '/app/cinema',
26 | component: Cinema
27 | },
28 | {
29 | path: '/app/mine',
30 | component: Mine
31 | }],
32 |
33 | // }, {
34 | // path: '/shopCar',
35 | // component: ShopCar
36 | // }, {
37 | // path: '/meituan',
38 | // component: Meituan
39 | // }, {
40 | // path: '/goodsList',
41 | // component: GoodsList
42 | // }, {
43 | // path: '/mtdetail:id',
44 | // component: Mtdetail
45 | }, {
46 | path: "/detail/:id",
47 | component: Detail
48 | }];
49 | export default routes;
--------------------------------------------------------------------------------
/src/day9_1/router/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import RouteConfig from './config';
3 | import RouteMap from './map';
4 | class RouterView extends React.Component{
5 | render(){
6 | const {routes}=this.props;
7 | return (主页
16 | { 17 | mines ? 18 | (
19 |
) :
22 | (用户名:{mines}
20 |账号：{mines}
21 |
23 |
)
33 | }
34 | 登陆
24 |
25 |
26 |
27 |
28 |
29 |
30 | 立即注册找回密码
31 |猫眼电影 客服电话：400-456-12345
32 |