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
5c2b0362
Commit
5c2b0362
authored
Jun 04, 2021
by
mayi
Browse files
类组件与函数式组件与provider的连接
parent
fe0f27b0
Changes
8
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
52 additions
and
21 deletions
+52
-21
.eslintcache
.eslintcache
+1
-1
src/components/Header/Header.tsx
src/components/Header/Header.tsx
+34
-12
src/components/Header/HeaderClass.tsx
src/components/Header/HeaderClass.tsx
+4
-2
src/components/Header/index.ts
src/components/Header/index.ts
+1
-1
src/redux/hooks.ts
src/redux/hooks.ts
+3
-0
src/redux/language/languageActions.ts
src/redux/language/languageActions.ts
+1
-1
src/redux/language/languageReducer.ts
src/redux/language/languageReducer.ts
+7
-3
src/redux/store.ts
src/redux/store.ts
+1
-1
No files found.
.eslintcache
View file @
5c2b0362
This diff is collapsed.
Click to expand it.
src/components/Header/Header.tsx
View file @
5c2b0362
//函数式组件
//函数式组件
import
*
as
React
from
"
react
"
;
import
*
as
React
from
"
react
"
;
import
{
Component
}
from
"
react
"
;
//
import { Component } from "react";
import
logo
from
"
../../assets/logo.svg
"
;
import
logo
from
"
../../assets/logo.svg
"
;
import
styles
from
"
./Header.module.css
"
;
import
styles
from
"
./Header.module.css
"
;
import
{
Layout
,
Typography
,
Input
,
Menu
,
Button
,
Dropdown
}
from
"
antd
"
;
import
{
Layout
,
Typography
,
Input
,
Menu
,
Button
,
Dropdown
}
from
"
antd
"
;
import
{
GlobalOutlined
}
from
"
@ant-design/icons
"
;
import
{
GlobalOutlined
}
from
"
@ant-design/icons
"
;
import
{
useSelector
}
from
"
../../redux/hooks
"
;
import
{
useDispatch
}
from
"
react-redux
"
;
import
{
useTranslation
}
from
"
react-i18next
"
;
import
{
import
{
useHistory
,
useHistory
,
useParams
,
//
useParams,
useLocation
,
//
useLocation,
useRouteMatch
,
//
useRouteMatch,
}
from
"
react-router-dom
"
;
}
from
"
react-router-dom
"
;
import
{
changeLanguageActionCreator
,
addLanguageActionCreator
,
}
from
"
../../redux/language/languageActions
"
;
export
const
Header
:
React
.
FC
=
()
=>
{
export
const
Header
:
React
.
FC
=
()
=>
{
const
history
=
useHistory
();
const
history
=
useHistory
();
const
params
=
useParams
();
// const params = useParams();
const
location
=
useLocation
();
// const location = useLocation();
const
match
=
useRouteMatch
();
// const match = useRouteMatch();
const
languageList
=
useSelector
((
state
)
=>
state
.
languageList
);
const
language
=
useSelector
((
state
)
=>
state
.
language
);
const
dispatch
=
useDispatch
();
const
{
t
}
=
useTranslation
();
const
changeLanguage
=
(
e
)
=>
{
if
(
e
.
key
===
"
new
"
)
{
// this.props.addLanguage("新语言", "新语言");
dispatch
(
addLanguageActionCreator
(
"
新语言
"
,
"
新语言
"
));
}
else
{
// this.props.changeLanguage(e.key);
dispatch
(
changeLanguageActionCreator
(
e
.
key
));
}
};
return
(
return
(
<>
<>
<
div
className
=
{
styles
[
"
app-header
"
]
}
>
<
div
className
=
{
styles
[
"
app-header
"
]
}
>
...
@@ -27,14 +47,16 @@ export const Header: React.FC = () => {
...
@@ -27,14 +47,16 @@ export const Header: React.FC = () => {
<
Dropdown
.
Button
<
Dropdown
.
Button
style
=
{
{
marginLeft
:
15
}
}
style
=
{
{
marginLeft
:
15
}
}
overlay
=
{
overlay
=
{
<
Menu
>
<
Menu
onClick
=
{
changeLanguage
}
>
<
Menu
.
Item
>
中文
</
Menu
.
Item
>
{
languageList
.
map
((
item
,
index
)
=>
(
<
Menu
.
Item
>
English
</
Menu
.
Item
>
<
Menu
.
Item
key
=
{
item
.
code
}
>
{
item
.
name
}
</
Menu
.
Item
>
))
}
<
Menu
.
Item
key
=
{
"
new
"
}
>
{
t
(
"
header.slogan
"
)
}
</
Menu
.
Item
>
</
Menu
>
</
Menu
>
}
}
icon
=
{
<
GlobalOutlined
/>
}
icon
=
{
<
GlobalOutlined
/>
}
>
>
语言
{
language
===
"
zh
"
?
"
中文
"
:
"
English
"
}
</
Dropdown
.
Button
>
</
Dropdown
.
Button
>
<
Button
.
Group
className
=
{
styles
[
"
button-group
"
]
}
>
<
Button
.
Group
className
=
{
styles
[
"
button-group
"
]
}
>
<
Button
onClick
=
{
()
=>
history
.
push
(
"
register
"
)
}
>
注册
</
Button
>
<
Button
onClick
=
{
()
=>
history
.
push
(
"
register
"
)
}
>
注册
</
Button
>
...
...
src/components/Header/HeaderClass.tsx
View file @
5c2b0362
//类组件
//类组件
import
*
as
React
from
"
react
"
;
import
*
as
React
from
"
react
"
;
import
{
Component
}
from
"
react
"
;
//
import { Component } from "react";
import
logo
from
"
../../assets/logo.svg
"
;
import
logo
from
"
../../assets/logo.svg
"
;
import
styles
from
"
./Header.module.css
"
;
import
styles
from
"
./Header.module.css
"
;
import
{
withTranslation
,
WithTranslation
}
from
"
react-i18next
"
;
import
{
withTranslation
,
WithTranslation
}
from
"
react-i18next
"
;
...
@@ -17,7 +17,7 @@ import {
...
@@ -17,7 +17,7 @@ import {
Menu
,
Menu
,
Button
,
Button
,
Dropdown
,
Dropdown
,
MenuItemProps
,
//
MenuItemProps,
}
from
"
antd
"
;
}
from
"
antd
"
;
import
{
GlobalOutlined
}
from
"
@ant-design/icons
"
;
import
{
GlobalOutlined
}
from
"
@ant-design/icons
"
;
import
{
withRouter
,
RouteComponentProps
}
from
"
react-router-dom
"
;
import
{
withRouter
,
RouteComponentProps
}
from
"
react-router-dom
"
;
...
@@ -128,3 +128,5 @@ class HeaderComponent extends React.Component<
...
@@ -128,3 +128,5 @@ class HeaderComponent extends React.Component<
export
const
Header
=
connect
(
mapStateToProps
,
mapDispatchToProps
)(
export
const
Header
=
connect
(
mapStateToProps
,
mapDispatchToProps
)(
withTranslation
()(
withRouter
(
HeaderComponent
))
withTranslation
()(
withRouter
(
HeaderComponent
))
);
);
//6.4日在函数组建里面用connect
//重学redux封装部分
\ No newline at end of file
src/components/Header/index.ts
View file @
5c2b0362
export
*
from
'
./HeaderClass
'
export
*
from
'
./Header
'
\ No newline at end of file
\ No newline at end of file
src/redux/hooks.ts
0 → 100644
View file @
5c2b0362
import
{
useSelector
as
useReduxSelector
,
TypedUseSelectorHook
}
from
'
react-redux
'
import
{
RootState
}
from
'
./store
'
export
const
useSelector
:
TypedUseSelectorHook
<
RootState
>
=
useReduxSelector
\ No newline at end of file
src/redux/language/languageActions.ts
View file @
5c2b0362
import
language
from
"
./language
"
;
import
language
from
"
./language
Reducer
"
;
export
const
CHANGE_LANGUAGE
=
"
changeLanguage
"
;
export
const
CHANGE_LANGUAGE
=
"
changeLanguage
"
;
export
const
ADD_LANGUAGE
=
"
addLanguage
"
;
export
const
ADD_LANGUAGE
=
"
addLanguage
"
;
...
...
src/redux/language/language.ts
→
src/redux/language/language
Reducer
.ts
View file @
5c2b0362
import
i18n
from
"
i18next
"
;
import
i18n
from
"
i18next
"
;
import
{
CHANGE_LANGUAGE
,
ADD_LANGUAGE
,
languageActionTypes
}
from
'
./languageActions
'
import
{
CHANGE_LANGUAGE
,
ADD_LANGUAGE
,
languageActionTypes
,
}
from
"
./languageActions
"
;
export
interface
LanguageState
{
export
interface
LanguageState
{
language
:
"
en
"
|
"
zh
"
;
language
:
"
en
"
|
"
zh
"
;
...
@@ -15,10 +19,10 @@ const defaultState: LanguageState = {
...
@@ -15,10 +19,10 @@ const defaultState: LanguageState = {
};
};
// eslint-disable-next-line import/no-anonymous-default-export
// eslint-disable-next-line import/no-anonymous-default-export
export
default
(
state
=
defaultState
,
action
:
languageActionTypes
)
=>
{
export
default
(
state
=
defaultState
,
action
:
languageActionTypes
)
=>
{
switch
(
action
.
type
)
{
switch
(
action
.
type
)
{
case
CHANGE_LANGUAGE
:
case
CHANGE_LANGUAGE
:
i18n
.
changeLanguage
(
action
.
payload
);
//此处会导致不是纯函数
i18n
.
changeLanguage
(
action
.
payload
);
//此处会导致不是纯函数
return
{
...
state
,
language
:
action
.
payload
};
return
{
...
state
,
language
:
action
.
payload
};
case
ADD_LANGUAGE
:
case
ADD_LANGUAGE
:
return
{
return
{
...
...
src/redux/store.ts
View file @
5c2b0362
import
{
createStore
}
from
"
redux
"
;
import
{
createStore
}
from
"
redux
"
;
import
languageReducer
from
"
./language/language
"
;
import
languageReducer
from
"
./language/language
Reducer
"
;
const
store
=
createStore
(
languageReducer
);
const
store
=
createStore
(
languageReducer
);
export
type
RootState
=
ReturnType
<
typeof
store
.
getState
>
export
type
RootState
=
ReturnType
<
typeof
store
.
getState
>
...
...
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