reactHook使用高阶组件

Hook 使用高阶组件

高阶公共组件

// 以下示例中是将重复的接口直接封装成高阶组件，实现复用import React, { useState, useEffect } from 'react'
import { getCompanyList } from '@/services/home'
const ComponentNameInterface = (OriginalComponent: any, propsHoc: () => void) => {const Component: React.FC = (props: any) => {console.log(props)const [companyName, setCompanyName] = useState<any[]>([])const companyListFun = (data: string | number | undefined | null) => {getCompanyList({word: data}).then(res => {console.log(res)if(res.code === '200') {setCompanyName(res.data || [])}}).catch(err => {console.error(err)setCompanyName([])})}useEffect(() => {companyListFun(null)}, [props])return <OriginalComponent{...props}companyName={companyName}getCompanyName={companyListFun}><div>我是高阶组件的内容{propsHoc()}</div></OriginalComponent>}return Component
}
export default ComponentNameInterface

使用高阶组件的方法：

import React from 'react'
import { Input } from 'antd'
import HoCComponent from '@/components/Hoc/ComponentNameInterface'
type HocProps = {getCompanyName: (data: string | number | undefined | null) => void;
}
const Hoc: React.FC<HocProps> = (props) => {console.log(props)const inputChange = (e: any) => {props.getCompanyName(e.target.value)}return <>我是要使用高阶组件{props.children}<Input onChange={inputChange} /></>
}
export default HoCComponent(Hoc,() => {return <div>hahahahahhhahhahah</div>}
)

注：我这里做的笔记只是基础，实际上在项目针对使用高阶组件这个方法使用封装上，大大减少了我代码的复用性，而且代码非常整洁，规整。

当不同的接口放在不同的高阶函数中如何调用那？链式调用就可以了

// 企业名称 组件1
import ComponentNameInterface from '@/components/Hoc/ComponentNameInterface';
// 引入 行业类型  组件2
import IndustryListInterface from '@/components/Hoc/IndustryListInterface'IndustryListInterface(ComponentNameInterface(EmissionsListing, undefined, false), undefined)

注：官网上有提供一些connect等方式链接，但是因为我目前的是一个中小型的项目，如果只是为了把多个组件融合成一个组件却只使用一个connect方法，那就是大才小用了。所以在这里我使用了链式的方法。

高阶组件 – React (docschina.org)

如何在一个组件内引用高阶组件，然后在组件内使用高阶组件封装标签小块儿功能
我们使用高阶组件在页面中使用，通常使用共同的封装方法和一些公共的数据，但是我想要将不同的antdPro图表中的所有不同标签放在一个组件中，通过不同的传参然后显示不同的图表，这种方法我使用回调函数拿到了内容后，在回调的函数内，我不能使用useState的方法去set拿值，所有我通过在回调内直接接受参数，然后return出去标签，这个是通过react中的函数的一个方法去显示标签的。

/***  这是所有使用antdCharts的一个封装组件，通过在传type类型去显示对应的图表*  如有新增的内容的尽量不要再HocEcharts中修改，而是在单个使用这个组件的标签*  上传对应的属性，而所传的对应属性和使用AntdCharts 是一样的。**  简单使用示例：*  <GetConfig data={[]} yField="count" xField="month" height={300} type="Area" />*/
import React, { useState, useEffect } from 'react';
import { colorBg } from '@/config';
import type { PieProps } from './PieComponent';
import { ConfigGlobla } from './ConfigGlobla';
import { Pie, Line, Bar, Column, Area, Heatmap } from '@ant-design/charts';
import ChartsEmpty from '../Empty/ChartsEmpty';
const HocEcharts = (OriginalComponent: any) => {const Component: React.FC<PieProps> = (props: any) => {const [configList, setConfigList] = useState({ ...ConfigGlobla });useEffect(() => {setConfigList({ ...ConfigGlobla });}, []);// 在这里return出去一个个独立的标签功能const setTypeChange = (list: any) => {const { type, data, height, color, dealWith, isColor } = list;let paramList: any[] = [];if (type === 'Heatmap') {// eslint-disable-next-line @typescript-eslint/no-unused-expressionsdata &&data.forEach((item: any) => {const monthData = item.troubleTypeList.map((cItem: any) => ({...cItem,month: item.month,}));// eslint-disable-next-line @typescript-eslint/no-unused-varsparamList = [...paramList, ...monthData];});} else if (type === 'Bar' && dealWith) {// eslint-disable-next-line @typescript-eslint/no-unused-expressionsdata &&data.forEach((item: any) => {const tmpList = item.troubleList.map((cItem: any) => ({...cItem,cateName: item.cateName,}));paramList = [...paramList, ...tmpList];});}const paramObj = {...configList,...list,data: JSON.stringify(paramList) !== '[]' ? paramList : data,line: undefined,smooth: true,meta: { month: { type: 'cat' }, count: { alias: '值' } },legend: {layout: 'horizontal',position: 'bottom',padding: [30, 0, 0, 0],flipPage: false,},color:color ||(isColor &&(({ level }: any) => {if (level) {return colorBg[level];}return null;})),};const Params = {Area: <Area {...paramObj} />,LineSolid: <Line {...paramObj} />,Column: <Column {...paramObj} />,Pie: <Pie {...paramObj} />,Bar: <Bar {...paramObj} />,Heatmap: <Heatmap {...paramObj} />,};return data.length > 0 ? Params[type] : <ChartsEmpty height={height} />;};const getConfig = (data: any) => {return <>{setTypeChange(data)}</>;};return <OriginalComponent {...props} GetConfig={getConfig} />;};return Component;
};
export default HocEcharts;

这就是我封装组件的一个示例。使用方式

// 引入
import HocEcharts from '@/components/EchartsComponents/HocEcharts';
组件内任意地方使用：
<GetConfig data={[]} yField="count" xField="month" height={300} type="Area" />

// 导出

export default HocEcharts(ChartsComponent);

有什么疑问或者笔记哪里有问题还请指出，大家可一起交流。感谢观看！

reactHook使用高阶组件相关推荐

react进阶系列 - 高阶组件详解四：高阶组件的嵌套使用
前面有讲到过很多页面会在初始时验证登录状态与用户角色.我们可以使用高阶组件来封装这部分验证逻辑.封装好之后我们在使用的时候就可以如下: export default withRule(Home); 但 ...
chapter2.3、react高阶组件，装饰器
React 技术高阶组件 let Root = props => <div>{props.schoolName}</div>; 如果要在上例的Root组件进行增强怎么办 ...
React 之高阶组件的理解
1.基本概念高阶组件是参数为组件,返回值为新组件的函数. 2.举例说明 ① 装饰工厂模式组件是 react 中的基本单元,组件中通常有一些逻辑(非渲染)需要复用处理.这里我们可以用高阶组件对组件内 ...
微信小程序项目，实现图书搜索高阶组件:
在图书列表页的顶端有一个搜索按钮,点击搜索以后会出现搜索面板,在这里不把这个当做一个新页面,做成一个组件,这种业务逻辑复杂的组件就是高阶组件在book.js新增一个变量: searching:fal ...
react实现汉堡_利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
React总结篇之六_React高阶组件
高阶组件的概念及应用以函数为子组件的模式这两种方式的最终目的都是为了重用代码,只是策略不同,各有优劣,开发者可以在实际工作中决定采用哪种方式. 一.高阶组件 1. 高阶组件(Higher Orde ...
25 Refs转发机制与在高阶组件中的使用
将子节点的ref暴露给父节点 16.3以上 Refs转发,将ref自动通过组件传递给子组件 1. 在父组件创建ref对象 2. 给子组件赋值ref 3. 通过React.forward向子组件转发re ...
22 React高阶组件
搭建服务端 yarn add express yarn add nodemon 在server目录下 npm init -y // 增加dev脚本"scripts": {" ...
react 给一个引用的组件添加新属性_高阶组件在React中的应用
高阶组件的定义接受React组件作为输入,输出一个新的React组件. 概念源自于高阶函数,将函数作为参数,或者输出一个函数,如map,reduce,sort. 用haskell的函数签名来表示: ...

reactHook使用高阶组件

Hook 使用高阶组件

当不同的接口放在不同的高阶函数中如何调用那？链式调用就可以了

reactHook使用高阶组件相关推荐

最新文章

热门文章

reactHook使用高阶组件

Hook 使用高阶组件

当不同的接口放在不同的高阶函数中如何调用那？ 链式调用就可以了

reactHook使用高阶组件相关推荐

最新文章

热门文章

当不同的接口放在不同的高阶函数中如何调用那？链式调用就可以了