React高阶函数使用

文章目录

• 一、TypeScript创建组件
• 二、高阶函数使用步骤
  • 1.创建interface,声明属性类型
  • 2.创建高阶函数
  • 3.在组件中使用
• 三、总结

一、TypeScript创建组件

const Example = ()=>{
    
}
export default Example

二、使用步骤

1.创建interface,声明属性类型

//创建接口声明属性类型
interface MenuItemProps{
    title: string,
    content: string,
    icon: React.ReactNode,//可传入标签
}

const Example = ()=>{

}
export default Example

2.创建高阶函数

//创建接口声明属性类型
interface MenuItemProps{
    title: string,
    content: string,
    icon: React.ReactNode,//可传入标签
}
//高阶函数，可返回组件
function MenuItem(props:MenuItemProps){
    return <>
        <a>
            <h4>{props.title}</h4>
            <li className='ml-5'>{props.content}</li>
            <span className='mr-5'>{props.icon}</span>
        </a>
    </>
}
const Example = ()=>{

}
export default Example

3.在组件中使用

//创建接口声明属性类型
interface MenuItemProps{
    title: string,
    content: string,
    icon: React.ReactNode,//可传入标签
}
//高阶函数，可返回组件
function MenuItem(props:MenuItemProps){
    return <>
        <a>
            <h4>{props.title}</h4>
            <li className='ml-5'>{props.content}</li>
            <span className='mr-5'>{props.icon}</span>
        </a>
    </>
}
import {RedditOutlined} from '@ant-design/icons'
const Example = ()=>{
    const menuList = [
        {
            title: 'React',
            content: '高阶函数',
            icon : (<RedditOutlined/>),
        },
        {
            title: 'java',
            content: 'springBoot',
            icon : (<RedditOutlined/>),
        },
        {
            title: 'vue',
            content: '生命周期',
            icon : (<RedditOutlined/>),
        }
    ]
    return <>
        <div>
            {    
                menuList.map((item,index)=>{
                    {/* 高阶函数组件 */}
                    <MenuItem 
                        key={index}
                        title={item.title}
                        content={item.content}
                        icon={item.icon}
                    />
                })
            }
        </div>
    </>

}
export default Example

三、总结

1.  本次使用图表组件<RedditOutlined/>，需下载 yarn add @ant-design/icons@5.x
2. 无其他样式，需自行添加样式进行展示