react兄弟组件之间的传值

一.通过redux

1.在redux中找到对应的文件设置

a.

b.

c.

d.

2.页面存储数据到redux中

3.页面提取redux里面的数据

二.通过hook中的createContext来实现

1.父组件中的写法

import React, { memo, useState } from 'react'
import { Row, Col } from 'antd';
import Department from "@/container/setModule/department";
import UserList from "@/container/setModule/userList";
import { useSetState } from '@/hooks'export const userManageContext = React.createContext();const UserManage = memo(function UserManage(props) {const [userManageData, setUserManageData] = useState();const UserManageContextProps = {userManageData,setUserManageData}return (<div className="bgW padding-20px"><Row><userManageContext.Provider value={UserManageContextProps}><Col span={4}><Department /></Col><Col span={20} style={{ paddingLeft: '10px', boxSizing: 'border-box' }}><UserList /></Col></userManageContext.Provider></Row></div>)
})export default UserManage

2.Department子组件中的写法

import React, { memo, useState, useEffect, useContext, useRef, useMemo } from 'react'
import { useAsync } from '@/hooks'
import { Input, Menu, Tree } from 'antd';
import { treelist } from '@/api/set'
import { requestCode } from '@/utils/varbile'
import { userManageContext } from '@/pages/set/userManage'
import { DownOutlined } from '@ant-design/icons';
import RouterLoading from "@/components/routerLoading";const Department = memo(function Department(props) {const reviceProps = useContext(userManageContext);const { Search } = Input;const [searchValue, setSearchValue] = useState();const [treelistdata, setTreelistdata] = useState([]);const refsData = useRef([]);useEffect(() => {const asyncTypes = async () => {let res = await treelist({ deptName: searchValue })res.code === requestCode.successCode && setTreelistdata(res.data);}asyncTypes();}, [searchValue])const onSearch = value => {setSearchValue(value)}const onSelect = (selectedKeys, info) => {console.log('selected', selectedKeys[0], info);// let selectedid = selectedKeys[0]reviceProps.setUserManageData(selectedKeys[0]);};const { TreeNode } = Tree;const getTreeNode = (treelistdata) => {if (treelistdata && treelistdata.length > 0) {return treelistdata.map((item) => {if (item.children && item.children.length) {return (<TreeNode key={item.deptId} title={item.deptName}>{getTreeNode(item.children)}</TreeNode>);}return (<TreeNodekey={item.deptId}title={item.deptName}// switcherIcon={<DownOutlined />}/>);});}// return [];};const tree = useMemo(() => {return <><Treestyle={{ width: '100%', marginTop: 50 }}showLineswitcherIcon={<DownOutlined />}// defaultExpandedKeys={['0-0-0']}onSelect={onSelect}autoExpandParent={true}defaultExpandAll={true}// treeData={treelistdata}>{getTreeNode(treelistdata)}</Tree></>;}, [treelistdata])// console.log(userManageMenu(treelistdata), '111')return (<div style={{ border: '1px solid #f0f0f0',padding: '10px',height:'720px'}}><Search placeholder="输入部门名称搜索" onSearch={onSearch} enterButton style={{ paddingTop: 20 }} />{treelistdata.length ? tree : RouterLoading}</div>)
})export default Department

3.UserList组件中的写法

import React, { memo, useEffect, useCallback, useContext, useState } from 'react'
import { LayoutTableComponent } from "@/components/layoutTable";
import SaleSearch from "@/components/searchCompent";
import { useSetState, useDel, usePagaTion } from '@/hooks'
import AddUser from "@/container/setModule/addUser";
import { SAGA_SYSUSER_LIST } from '@/redux/constants/sagaType'
import { createSelector } from 'reselect';
import { useSelector, useDispatch } from "react-redux";
import OPtionCompent from '@/components/optionCompent'
import { sysuserdel, sysuserresetPwd } from "@/api/set";
import { Switch, notification } from 'antd';
import { asstate } from "@/assets/js/staticData";
import { confirm, quenue } from '@/utils/function'
import { requestCode } from '@/utils/varbile';
import { userManageContext } from '@/pages/set/userManage'const UserList = memo(function UserList(props) {const reviceProps = useContext(userManageContext);const [editData, setEditData] = useSetState({ visible: false, datailData: {} });const [searchValue, setSearchValue] = useSetState({});const { forceUpdate, pagaTion, changePgVal } = usePagaTion();const selectNumOfDoneTodos = createSelector([(state) => state.set],(set) => [set.sysuserlist]);const [sysuserlist] = useSelector(selectNumOfDoneTodos);const initFetch = useCallback((searchValue) => {const searchsVal = Object.assign({}, searchValue, { start: searchValue.createTime && searchValue ? searchValue.createTime[0] : null, end: searchValue.createTime ? searchValue.createTime[1] : null, createTime: null })dispatch({ type: SAGA_SYSUSER_LIST, payload: { ...pagaTion.current, ...searchsVal } })}, [dispatch, pagaTion.current]);const dispatch = useDispatch();useEffect(() => {initFetch({ ...searchValue, deptId: reviceProps.userManageData })}, [initFetch, searchValue, reviceProps.userManageData])const [deletedata] = useDel(sysuserdel, () => initFetch());const columns = [{key: 'id',align: 'center',title: '序号',fixed: 'left',render: (text, record, index) => `${index + 1}`,},{title: '用户名',dataIndex: 'userName',key: 'userName',align: 'center',},{title: '昵称',dataIndex: 'nicoName',key: 'nicoName',align: 'center',},{title: '性别',dataIndex: 'sex',key: 'sex',align: 'center',},{title: '电话',dataIndex: 'phonenumber',key: 'phonenumber',align: 'center',},{title: '邮箱',dataIndex: 'email',key: 'email',align: 'center',},{title: '部门/岗位',dataIndex: 'deptName',key: 'deptName',align: 'center',render: (text, record) =><><span>{record.deptName}</span> / <span>{record.postName}</span></>},{title: '状态',dataIndex: 'isdelete',key: 'isdelete',align: 'center',render: (text, record, index) =><><Switch checkedChildren="激活" unCheckedChildren="禁用" key={text} defaultChecked={!text} disabled={true} /></>},{title: '创建日期',dataIndex: 'createTime',key: 'createTime',align: 'center',},{width: 200,title: '操作',dataIndex: 'createTime',align: 'center',fixed: 'right',render: (text, record) => (<>{!record.isdelete ? <OPtionCompent config={[{ title: '编辑', operating: () => handle(2, record) },{ title: '重置密码', color: 'green', operating: () => resetPwd(record) },{ title: '删除', color: 'red', operating: () => deletedata({ userId: record.userId, listen: Math.random() * 1000, idKey: 'userId' }) }]} /> : null}</>)},];const datas = {btnGrounp: [{title: '新增',onClick: (e) => handle(1),iconClass: 'add'},// {//   title: '导出',//   onClick: (e) => handle(),//   iconClass: 'export',//   type: "dashed"// },// {//   title: '删除',//   onClick: (e) => handle(),//   iconClass: 'delete',// }],tableProps: {id: 'userId',columns: columns,dataSource: sysuserlist.rows,scroll: { x: 1500, y: 400 },loading: false,},pagaTionProps: {total: sysuserlist.total || 0,current:pagaTion.current.page,pageSize:pagaTion.current.size,onChanges: (page, size) => [changePgVal(page, size), forceUpdate()],},receive: () => initFetch(),}const searchConfig = [{title: '名称',key: 'username',type: 'input'},{title: '日期',key: 'createTime',type: 'timeRangeSelection'},{title: '状态',key: 'isdelete',type: 'select',selectListValue: asstate,selectLableName: 'value',selectKeyValue: 'label'},];const handle = (state, datailData = {}) => {setEditData({ visible: true, datailData })}const resetPwd = async (record) => {confirm(async () => {let res = await sysuserresetPwd({ userId: record.userId })if (res.code === requestCode.successCode) {notification['success']({message: '你重置的默认密码如下',description: 'admin123456',duration: 8,});}}, '你确定要重置密码吗？');}return (<div style={{ border: '1px solid #f0f0f0', padding: '10px', height: '720px' }}><LayoutTableComponent {...datas}><SaleSearch options={searchConfig} callBack={setSearchValue} /></LayoutTableComponent><AddUser {...editData} onCancel={() => setEditData({ visible: false })} sucessCallback={() => initFetch(searchValue)} /></div>)
})export default UserList

组件Department向组件UserList传值

引入父组件中的设置

import { userManageContext } from '@/pages/set/userManage'

取参数两个子组件都要写

const reviceProps = useContext(userManageContext);

存值

reviceProps.setUserManageData(selectedKeys[0]);

取值

reviceProps.userManageData

react兄弟组件之间的传值相关推荐

vue兄弟组件之间的传值，bus运用，beforeDestroy销毁，Bus.$off
vue兄弟组件之间的传值 1.建立一个单独的文件bus.js import Vue from 'vue' export default new Vue() 2.传递事件 // 传递事件 import ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
React（5）React兄弟组件之间的通信
文章目录前言一.兄弟组件之间的通信原理二.三个组件的基本结构 1.子组件ColorSelector的基本结构 2.子组件ColorBoard的基本结构 3.父组件Color的基本结构三.Col ...
React兄弟组件之间通信
兄弟组件之间通信 React是只有单项数据流动模式,也就是只能父组件的数据传递给子组件,而没有办法将子组件的数据传递给父组件.那么如果想要两个子兄弟组件通信该怎么办呢? 答案是可以通过子组件向父组件推 ...
vue 兄弟组件之间的传值
1. 定义一个公共的bus.js //bus.js import Vue from 'vue' export default new Vue() 2. 在子组件A里用$emit发射数据 <scr ...
兄弟组件之间进行传值
首先创建一个中转站,是个js文件 import Vue from 'vue' var hub=new Vue(); //中转站 export default hub; 然后在第一个兄弟组件中 1.首先 ...
react 父子组件之间相互传值
From: https://blog.csdn.net/luzhaopan/article/details/85003362 1.定义父组件 import React, { PureComponent ...
react父子组件之间的传值
父传子------------- 父组件 constructor(props){super(props)this.state={message:"我是父组件传来的"} }rende ...
前端开发：组件之间的传值(父传子、子传父、兄弟组件之间传值)的使用
前言在前端开发的时候,处理数据.传递数据是非常常用的操作方式,也是前端开发工作中非常重要的部分.尤其是在前端开发过程中的组件之间的数据传递,是必用操作.那么本篇博文就来分享一下在前端开发的时候,对于 ...

react兄弟组件之间的传值

react兄弟组件之间的传值

react兄弟组件之间的传值相关推荐

最新文章

热门文章