react學習筆記(八)---react與ts搭配時的類型聲明小結

1、在ts中函數式組件的聲明

import {PropsWithChildren} from "react";

interface IItemProps {
    name: string,
    age: number

}
const Item: React.FC<IItemProps>= (props: PropsWithChildren<IItemProps>) => {
    return <div>
        <h2>this is Item</h2>
        <div><span>name---{props.name}</span><span>age---{props.age}</span></div>
    </div>
}

export default Item

 2、高階組件的類型聲明

import {PropsWithChildren} from "react";

interface IHighItem{
    name: string,
    age: number
}
const withHighItem: (Comp: React.ComponentType<any>) => React.FC<IHighItem> = (Comp: React.ComponentType<any>) => {
    return (props: PropsWithChildren<IHighItem>) => {
        return <div>
            <h3>this is highItem</h3>
            <Comp {...props}/>
        </div>
    }
}

export default withHighItem

使用

import React from "react";
import style from './App.module.css'
import Item from './Item'
import HighItem from './HighItem'

const App: React.FC = () => {
  return <div className={style.App}>
    <h1>this is App Test</h1>
    {HighItem(Item)({name: 'abc', age: 12})} </div>
}

export default App;