Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Open sidebar
mayi
reactTravle
Commits
c90e538d
Commit
c90e538d
authored
Jun 04, 2021
by
mayi
Browse files
study部分
parent
5c2b0362
Changes
15
Expand all
Show whitespace changes
Inline
Side-by-side
Showing
15 changed files
with
773 additions
and
12 deletions
+773
-12
.eslintcache
.eslintcache
+1
-1
package-lock.json
package-lock.json
+641
-0
package.json
package.json
+1
-0
src/App.tsx
src/App.tsx
+2
-1
src/components/Header/Header.tsx
src/components/Header/Header.tsx
+5
-3
src/components/Header/HeaderClass.tsx
src/components/Header/HeaderClass.tsx
+2
-2
src/pages/Home/home.tsx
src/pages/Home/home.tsx
+1
-1
src/pages/index.ts
src/pages/index.ts
+2
-1
src/pages/studys/index.ts
src/pages/studys/index.ts
+1
-0
src/pages/studys/studys.module.css
src/pages/studys/studys.module.css
+0
-0
src/pages/studys/studys.tsx
src/pages/studys/studys.tsx
+45
-0
src/redux/citys/cityActions.ts
src/redux/citys/cityActions.ts
+2
-0
src/redux/citys/cityReducer.ts
src/redux/citys/cityReducer.ts
+26
-0
src/redux/language/language.ts
src/redux/language/language.ts
+37
-0
src/redux/store.ts
src/redux/store.ts
+7
-3
No files found.
.eslintcache
View file @
c90e538d
This diff is collapsed.
Click to expand it.
package-lock.json
View file @
c90e538d
This diff is collapsed.
Click to expand it.
package.json
View file @
c90e538d
...
...
@@ -14,6 +14,7 @@
"
@types/react-redux
"
:
"
^7.1.16
"
,
"
@types/react-router-dom
"
:
"
^5.1.7
"
,
"
antd
"
:
"
^4.16.1
"
,
"
axios
"
:
"
^0.21.1
"
,
"
i18next
"
:
"
^20.3.1
"
,
"
react
"
:
"
^17.0.1
"
,
"
react-dom
"
:
"
^17.0.1
"
,
...
...
src/App.tsx
View file @
c90e538d
...
...
@@ -2,7 +2,7 @@ import React from "react";
import
styles
from
"
./App.module.css
"
;
import
{
BrowserRouter
,
Route
,
Switch
}
from
"
react-router-dom
"
;
// import { TypographyProps } from "antd/lib/typography/Typography";
import
{
HomePage
,
SignInPage
,
Register
,
Deatil
}
from
"
./pages
"
;
import
{
HomePage
,
SignInPage
,
Register
,
Deatil
,
Studys
}
from
"
./pages
"
;
function
App
()
{
return
(
<
div
className
=
{
styles
.
App
}
>
...
...
@@ -11,6 +11,7 @@ function App() {
<
Route
exact
path
=
"/"
component
=
{
HomePage
}
/>
<
Route
path
=
"/signin"
component
=
{
SignInPage
}
/>
<
Route
path
=
"/register"
component
=
{
Register
}
/>
<
Route
path
=
"/studys"
component
=
{
Studys
}
/>
<
Route
path
=
"/detail/:tourisRouteId"
component
=
{
Deatil
}
/>
<
Route
render
=
{
()
=>
<
h1
>
404 NOT FOUND
</
h1
>
}
/>
</
Switch
>
...
...
src/components/Header/Header.tsx
View file @
c90e538d
...
...
@@ -3,6 +3,7 @@ import * as React from "react";
// import { Component } from "react";
import
logo
from
"
../../assets/logo.svg
"
;
import
styles
from
"
./Header.module.css
"
;
import
{
Layout
,
Typography
,
Input
,
Menu
,
Button
,
Dropdown
}
from
"
antd
"
;
import
{
GlobalOutlined
}
from
"
@ant-design/icons
"
;
import
{
useSelector
}
from
"
../../redux/hooks
"
;
...
...
@@ -23,14 +24,14 @@ export const Header: React.FC = () => {
// const params = useParams();
// const location = useLocation();
// const match = useRouteMatch();
const
languageList
=
useSelector
((
state
)
=>
state
.
languageList
);
const
language
=
useSelector
((
state
)
=>
state
.
language
);
const
languageList
=
useSelector
((
state
)
=>
state
.
language
.
languageList
);
const
language
=
useSelector
((
state
)
=>
state
.
language
.
language
);
const
dispatch
=
useDispatch
();
const
{
t
}
=
useTranslation
();
const
changeLanguage
=
(
e
)
=>
{
if
(
e
.
key
===
"
new
"
)
{
// this.props.addLanguage("新语言", "新语言");
dispatch
(
addLanguageActionCreator
(
"
新语言
"
,
"
新语言
"
));
dispatch
(
addLanguageActionCreator
(
"
新语言
"
,
"
newLanguage
"
));
}
else
{
// this.props.changeLanguage(e.key);
dispatch
(
changeLanguageActionCreator
(
e
.
key
));
...
...
@@ -58,6 +59,7 @@ export const Header: React.FC = () => {
>
{
language
===
"
zh
"
?
"
中文
"
:
"
English
"
}
</
Dropdown
.
Button
>
<
Button
.
Group
className
=
{
styles
[
"
button-group
"
]
}
>
<
Button
onClick
=
{
()
=>
history
.
push
(
"
register
"
)
}
>
注册
</
Button
>
<
Button
onClick
=
{
()
=>
history
.
push
(
"
signin
"
)
}
>
登陆
</
Button
>
...
...
src/components/Header/HeaderClass.tsx
View file @
c90e538d
...
...
@@ -25,8 +25,8 @@ import { RootState } from "../../redux/store";
const
mapStateToProps
=
(
state
:
RootState
)
=>
{
return
{
language
:
state
.
language
,
languageList
:
state
.
languageList
,
language
:
state
.
language
.
language
,
languageList
:
state
.
language
.
languageList
,
};
};
const
mapDispatchToProps
=
(
dispatch
:
Dispatch
)
=>
{
...
...
src/pages/Home/home.tsx
View file @
c90e538d
...
...
@@ -62,7 +62,7 @@ export class HomePageComponent extends React.Component<WithTranslation> {
<
ProductCollection
title
=
{
<
Typography
.
Title
level
=
{
3
}
type
=
"success"
>
{
t
(
"
home_page.
domestic_travel
"
)
}
{
t
(
"
home_page.
hot_recommended
"
)
}
</
Typography
.
Title
>
}
sideImage
=
{
sideImage3
}
...
...
src/pages/index.ts
View file @
c90e538d
...
...
@@ -2,3 +2,4 @@ export * from'./Home'
export
*
from
'
./register
'
export
*
from
'
./signin
'
export
*
from
'
./detail
'
export
*
from
'
./studys
'
\ No newline at end of file
src/pages/studys/index.ts
0 → 100644
View file @
c90e538d
export
*
from
'
./studys
'
\ No newline at end of file
src/pages/studys/studys.module.css
0 → 100644
View file @
c90e538d
src/pages/studys/studys.tsx
0 → 100644
View file @
c90e538d
import
*
as
React
from
"
react
"
;
import
{
Component
}
from
"
react
"
;
import
styles
from
"
./studys.module.css
"
;
import
{
Input
,
Button
}
from
'
antd
'
;
import
{
useSelector
}
from
"
../../redux/hooks
"
;
import
{
useDispatch
}
from
"
react-redux
"
;
export
const
Studys
:
React
.
FC
=
()
=>
{
const
dispatch
=
useDispatch
();
const
cityList
=
useSelector
((
state
)
=>
state
.
city
.
cityLists
)
const
cityName
=
useSelector
((
state
)
=>
state
.
city
.
cityName
)
const
cityInput
=
useSelector
((
state
)
=>
state
.
city
.
cityInput
)
const
addCity
=
()
=>
{
console
.
log
(
cityInput
)
}
const
changeInput
=
(
e
)
=>
{
// console.log(e.target.value)
const
action
=
{
type
:
'
changeInput
'
,
value
:
e
.
target
.
value
,
};
dispatch
(
action
)
}
return
(
<>
{
/* 做一个与header.tsx类似的页面 */
}
<
h1
>
练习页面
</
h1
>
<
div
>
<
div
>
添加你想去的城市:
<
input
placeholder
=
"Basic usage"
onChange
=
{
changeInput
}
style
=
{
{
width
:
200
}
}
value
=
{
cityInput
}
/>
<
Button
type
=
"primary"
onClick
=
{
addCity
}
>
添加
</
Button
>
</
div
>
<
h1
>
我最喜欢的城市:
{
cityName
}
</
h1
>
<
h1
>
我想去的城市:
{
cityList
.
map
((
item
,
index
)
=>
{
return
(
<>
<
span
>
{
item
.
name
}
</
span
>
</>
)
})
}
</
h1
>
</
div
>
</>
);
};
src/redux/citys/cityActions.ts
0 → 100644
View file @
c90e538d
export
const
CHANGE_INPUT
=
'
changeInput
'
export
{}
\ No newline at end of file
src/redux/citys/cityReducer.ts
0 → 100644
View file @
c90e538d
import
{
CHANGE_INPUT
}
from
'
./cityActions
'
export
interface
CityState
{
cityInput
:
string
|
number
cityName
:
string
;
cityLists
:
{
name
:
string
}[];
}
const
defaultState
:
CityState
=
{
cityInput
:
''
,
cityName
:
"
东京
"
,
cityLists
:
[
{
name
:
"
东京
"
,
},
],
};
export
default
(
state
=
defaultState
,
action
)
=>
{
switch
(
action
.
type
)
{
case
CHANGE_LANGUAGE
:
i18n
.
changeLanguage
(
action
.
payload
);
//此处会导致不是纯函数
return
{
...
state
,
language
:
action
.
payload
};
default
:
return
state
;
}
};
src/redux/language/language.ts
0 → 100644
View file @
c90e538d
//无用
import
i18n
from
"
i18next
"
;
import
{
CHANGE_LANGUAGE
,
ADD_LANGUAGE
,
languageActionTypes
,
}
from
"
./languageActions
"
;
export
interface
LanguageState
{
language
:
"
en
"
|
"
zh
"
;
languageList
:
{
name
:
string
;
code
:
string
}[];
}
const
defaultState
:
LanguageState
=
{
language
:
"
zh
"
,
languageList
:
[
{
name
:
"
中文
"
,
code
:
"
zh
"
},
{
name
:
"
English
"
,
code
:
"
en
"
},
],
};
// eslint-disable-next-line import/no-anonymous-default-export
export
default
(
state
=
defaultState
,
action
:
languageActionTypes
)
=>
{
switch
(
action
.
type
)
{
case
CHANGE_LANGUAGE
:
i18n
.
changeLanguage
(
action
.
payload
);
//此处会导致不是纯函数
return
{
...
state
,
language
:
action
.
payload
};
case
ADD_LANGUAGE
:
return
{
...
state
,
languageList
:
[...
state
.
languageList
,
action
.
payload
],
};
default
:
return
state
;
}
};
src/redux/store.ts
View file @
c90e538d
import
{
createStore
}
from
"
redux
"
;
import
{
createStore
,
combineReducers
}
from
"
redux
"
;
import
languageReducer
from
"
./language/languageReducer
"
;
const
store
=
createStore
(
languageReducer
);
import
CityReducer
from
'
./citys/cityReducer
'
const
rootReducer
=
combineReducers
({
language
:
languageReducer
,
city
:
CityReducer
})
const
store
=
createStore
(
rootReducer
);
export
type
RootState
=
ReturnType
<
typeof
store
.
getState
>
export
default
store
;
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment