# react hooks 子父传值方法，通过在父组件定义函数
案例需求，子组件A传值到父组件，父组件再传值到子组件B
# 😳 步骤1
因为子组件本身已经有点击事件changeCollapsed，此事件用来控制收起放开icon图表的改变，不能删掉；所以传值办法选择了在父组件定义put状态和isPut方法
//父组件
const [put,setIsput] = useState(true)
const isPut =(put)=>{ //传值的函数
// console.log(put);
// let aa =1 ;
// console.log(aa);
setIsput(put)
// return put
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
//父组件
return (
<Layout>
<SideMenu put={put}></SideMenu> //组件B（取值）
<Layout className="site-layout">
<TopHeader isPut={isPut}></TopHeader> //组件A（传值`函数`）
<Layout className="mycontent">
<Outlet style={{ border: "1px solid red" }} />
</Layout>
</Layout>
</Layout>
);
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 😳 步骤2
//1、子组件A: 获取传过来的函数isPut，
export default function TopHeader({isPut}) { //
const [collapsed, setCollapsed] = useState(false);
const changeCollapsed = () => {
setCollapsed(!collapsed);
console.log(collapsed);
isPut(collapsed) // 设置值
console.log(isPut,'aaaaa');
};
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
2、设置值方法
{collapsed ? (
<MenuUnfoldOutlined onClick={changeCollapsed} />
) : (
<MenuFoldOutlined onClick={changeCollapsed} />
)}
1
2
3
4
5
2
3
4
5
# 😏 步骤3
组件B取值
export default function SideMenu({ put }) {
console.log(put,'hhh');
let navigate = useNavigate();
}
1
2
3
4
5
2
3
4
5
组件B赋值
return (
<Sider trigger={null} collapsible collapsed={put}> //赋值
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
{renderMenu(menuList)}
</Menu>
</Sider>
);
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 😍 完整代码
//父组件
import React ,{useState} from "react";
import { Outlet } from "react-router-dom";
import SideMenu from "../../components/sandbox/SideMenu";
import TopHeader from "../../components/sandbox/TopHeader";
//css
import "./NewsSandBox.css";
//antd
import { Layout } from "antd";
export default function NewsSandBox() {
const [put,setIsput] = useState(true)
const isPut =(put)=>{
// console.log(put);
// let aa =1 ;
// console.log(aa);
setIsput(put)
// return put
}
console.log(put,'ccccc');
return (
<Layout>
<SideMenu put={put}></SideMenu>
<Layout className="site-layout">
<TopHeader isPut={isPut}></TopHeader>
<Layout className="mycontent">
<Outlet style={{ border: "1px solid red" }} />
</Layout>
</Layout>
</Layout>
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//子组件A （传值）
import React, { useState } from "react";
import { useNavigate } from "react-router";
import { Layout, Dropdown, Menu, Space, Avatar } from "antd";
import { DownOutlined, UserOutlined } from "@ant-design/icons";
import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons";
const { Header } = Layout;
export default function TopHeader({isPut}) {
const [collapsed, setCollapsed] = useState(false);
const changeCollapsed = () => {
setCollapsed(!collapsed);
console.log(collapsed);
isPut(collapsed)
console.log(isPut,'aaaaa');
};
// const menuList = [
// {
// key: "/admin",
// title: "超级管理员",
// icon: <HomeOutlined />,
// },
// {
// key: "/changePassword",
// title: "修改密码",
// icon: <HomeOutlined />,
// },
// {
// key: "/quit",
// title: "退出账号",
// icon: <HomeOutlined />,
// },
// ];
let navigate = useNavigate();
const menu = (
<Menu>
<Menu.Item>超级管理员</Menu.Item>
<Menu.Item onClick={(props) => {
console.log(props)
navigate('/right-manage/role/list')
}}>修改密码</Menu.Item>
<Menu.Item
danger
onClick={(props) => {
console.log(props)
navigate('/signin')
}}
>
退出
</Menu.Item>
</Menu>
);
return (
<Header className="site-layout-background" style={{ padding: "0 16px" }}>
{collapsed ? (
<MenuUnfoldOutlined onClick={changeCollapsed} />
) : (
<MenuFoldOutlined onClick={changeCollapsed} />
)}
<div className="mycenter" style={{ float: "right", display:"flex" }}>
<span style={{ marginRight: "20px" }}>欢迎xx回来</span>
<Dropdown overlay={menu}>
<div onClick={(e) => e.preventDefault()}>
<Space>
<Avatar size="default" icon={<UserOutlined />} />
<DownOutlined />
</Space>
</div>
</Dropdown>
</div>
</Header>
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
//子组件B （取值）
import React from "react";
import { Layout, Menu } from "antd";
import { UserOutlined, HomeOutlined, CrownOutlined } from "@ant-design/icons";
import SubMenu from "antd/lib/menu/SubMenu";
import { useNavigate } from "react-router";
import './index.css' //css
const { Sider } = Layout;
const menuList = [
{
key: "/home",
title: "首页",
icon: <HomeOutlined />,
},
{
key: "/project",
title: "项目",
icon: <UserOutlined />,
// children: [
// {
// key: "",
// title: "项目",
// icon: <CrownOutlined />,
// },
// {
// key: "/project-manage/factory",
// title: "工厂",
// icon: <CrownOutlined />,
// },
// {
// key: "/project-manage/progress",
// title: "进度",
// icon: <CrownOutlined />,
// },
// {
// key: "/project-manage/property",
// title: "资产",
// icon: <CrownOutlined />,
// },
// ]
},
{
key: "/right-manage",
title: "个人中心",
icon: <CrownOutlined />,
children: [
{
key: "/right-manage/role/list",
title: "密码管理",
icon: <CrownOutlined />,
},
{
key: "/right-manage/right/list",
title: "2",
icon: <CrownOutlined />,
},
],
},
];
export default function SideMenu({ put }) {
console.log(put,'hhh');
let navigate = useNavigate();
// Menu
const renderMenu = (menuList) => {
return menuList.map((item) => {
if (item.children) {
return (
<SubMenu key={item.key} icon={item.icon} title={item.title}>
{renderMenu(item.children)}
</SubMenu>
);
}
return (
<Menu.Item
key={item.key}
icon={item.icon}
onClick={() => navigate(item.key)}
>
{item.title}
</Menu.Item>
);
});
};
return (
<Sider trigger={null} collapsible collapsed={put}>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
{renderMenu(menuList)}
</Menu>
</Sider>
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
传值方法：context，redux 待续......