React: HOC高阶组件的使用

主要用于组件复用

首先定义以下组件(UlCom)信息

import React from "react";
import LiCom from './components/LiCom';
import { withHocCom }  from "./HocCom";
import { Data } from './hocType';

const Hoc: React.FC<{ liData: Data[] }> = ({ liData }) => {
  return <>
    <h1>HOC高阶组件的使用</h1>
    <ul>
      {
        liData.map(data => {
          return <LiCom key={ data.id } data={ data }></LiCom>
        })
      }
    </ul>
  </>
}
export default withHocCom(Hoc);

LiCom组件

import React from "react";
import { Data } from '../../hocType';

interface Props {
  data: Data
}
const LiCom: React.FC<Props> = ({ data }) => {
  const { id, name, mark } = data;
  return <>
    <li>id: { id } ||||||| name: { name } ||||||| mark: { mark }</li>
  </>
}
export default LiCom;

HocType.ts

export interface Data {
  id: number;
  name: string;
  mark: string
}

使用HOC处理UlCom组件的逻辑，注意要withXxx命名规范

HocCom组件

import React from "react";
import { Data } from './hocType';

export const withHocCom = (ChildCom: React.ComponentType<{ liData: Data[] }>) => {
  return (props: any) => {
    const dataValue: Data[] = []
    for(let i = 0; i < 10; i++){
      dataValue.push({
        id: i,
        name: `名字-${i}`,
        mark: `备注-${i}`
      })
    }
    return <ChildCom { ...props } liData={ dataValue } />
  }
}