没有合适的资源?快使用搜索试试~ 我知道了~
资源详情
资源评论
资源推荐
课
件
12-05
⾼
阶
组
件
、
r
eac
t
h
oo
k
s
、
异
步
组
件
⾼
阶
组
件
(
HOC
,
H
igh
O
r
de
r
C
ompon
e
nt
)
定义:把组件作为参数,并返回(⾼阶)组件的函数,称为⾼阶组件。
代
码
复
⽤
,
状
态
/
逻辑
抽
象
可
以
对
st
a
t
e
/
e
v
e
nt
/
props
进
⾏
劫
持
、
操
作
假
如
有
这
样
的
场
景
,两个
查
询
列
表
的
⻚⾯
结
构
相
同
,
查
询
条
件
相
同
,
只
是
表
头
包
括
操
作
列
不⼀
样
:
显
然
这
两个
⻚⾯
具
有
很
⾼
的
复
⽤
性
,不
只
是
U
I
级
别
的
复
⽤
,
逻辑都
⼏
乎
⼀
致
,
这
时
候
,
⾼
阶
组
件
就
派
上
⽤
场
了
。
我
们
定
义
查
询
条
件
的
部
分
为
组
件
S
ea
r
ch
P
a
n
el
,
表
格
组
件为
T
able
(
a
nt
d
de
s
ig
n
的
T
able
⾃
带
底
部
分
⻚
区
),
那
么
这
两个
⻚⾯
可
能
是
下
⾯
的
代
码
结
构
:
⻚⾯
1
,
可
能
是普
通
⽤
户
查
看
⻚
1 import React, { Component } from 'react';
2 import request from 'axios';
3 import { Button, Table } from 'antd';
4 import SearchPanel from './SearchPanel';
5
6 export default class Page1 extends Component {
7 state = {
8 query: {
9 name: '',
10 id: '',
11 time: '',
12 valid: ''
13 },
14 dataSource: []
15 }
16 columns = [
17 {dataIndex: 'label', title: '
标
签
'},
18 {dataIndex: 'action', title: '
操
作
',
19 render: (_, record) => {
20 const onOpen = () => window.open(`/xxx/${record.id}`);
21 return <Button onClick={onOpen}>
查
看
</Button>;
22 }
23 }]
24
25 onChange = (params) => {
26 this.setState(query => ({ ...query, ...params }));
27 request('/api/list', {
28 method: 'GET',
29 params
30 }).then(res => { //
这
⾥
暂
不
考
虑
异常
31 this.setState({ dataSource: res.data });
32 });
33 }
34
35 componentDidMount() {
36 this.onChange(this.state.query);
37 }
38
39 render() {
40 const { query, dataSource } = this.state;
41 return (
42 <>
43 <SearchPanel value={query} onChange={this.onChange} />
44 <Table columns={this.columns} dataSource={dataSource} />
45 </>
46 );
47 }
48 }
49
⻚⾯
2
,
可
能
是
管
理
员
⻚⾯
1 import React, { Component } from 'react';
2 import request from 'axios';
3 import { Button, Table } from 'antd';
4 import SearchPanel from './SearchPanel';
5
6 export default class Page2 extends Component {
7 state = {
8 query: {
9 name: '',
10 id: '',
11 time: '',
12 valid: ''
13 },
14 dataSource: []
15 }
16
17 onEdit = id => {}
18 onDelete = id => {}
19
20 columns = [
21 {dataIndex: 'name', title: '
名
称
'},
22 {dataIndex: 'action', title: '
操
作
',
23 render: (_, record) => {
24 return <>
25 <Button onClick={() => this.onEdit(record.id)}>
编
辑
</Button>
26 <Button onClick={() => this.onDelete(record.id)}>
删
除
</Button>
27 </>;
28 }
29 }]
30
31 onChange = (params) => {
32 this.setState(query => ({ ...query, ...params }));
33 request('/api/list/admin', {
34 method: 'GET',
35 params
36 }).then(res => { //
这
⾥
暂
不
考
虑
异常
37 this.setState({ dataSource: res.data });
38 });
39 }
40
41 componentDidMount() {
42 this.onChange(this.state.query);
43 }
44
45 render() {
46 const { query, dataSource } = this.state;
47 return (
48 <>
49 <SearchPanel value={query} onChange={this.onChange} />
50 <Table columns={this.columns} dataSource={dataSource} />
51 </>
52 );
53 }
54 }
55
可
以
看
到
,两
份代
码
除
了
表
格
列
及
其
操
作
外
,
请
求
数据
的
接
⼝
也
分别
为
/
a
p
i
/
li
st
和
/
a
p
i
/
li
st
/
ad
m
i
n
,
这
两
份
⽂
件
总
计
约
100
⾏
代
码
。
我
们使
⽤
⾼
阶
组
件
整
合
相
同
的
逻辑
:
P
age
1
和
P
age
2
的
公共
U
I
部
分
:
1 import React from 'react';
2 import { Table } from 'antd';
3 import SearchPanel from './SearchPanel';
4
5 //
⽆
状
态
组
件
,
所
以
⽤
函
数
实
现
更
简
洁
6 export default function PageCommon({ query, dataSource, onChange, columns }) {
7 return (
8 <>
9 <SearchPanel value={query} onChange={onChange} />
10 <Table columns={columns} dataSource={dataSource} />
11 </>
12 );
13 }
14
⾼
阶
组
件
:
1 import React, { Component } from 'react';
2 import request from 'axios';
3
4 export default function hoc(WrappedComponent, api) {
5 return class extends Component {
6 state = {
7 query: {
8 name: '',
9 id: '',
10 time: '',
剩余25页未读,继续阅读
7323
- 粉丝: 22
- 资源: 327
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0