重温react-09(高阶组件的使用方式和注意事项)

高阶组件

可以理解为vue的混入吧,但是没有那个方便(个人见解)

挂载的全局App.jsx的代码

javascript 复制代码
import React from 'react';
import LearnFunction05 from './LearnFunction05'; //  这个是高阶函数的用法
export default function boxReact() {
  return (
    <div>
      <LearnFunction05 />
    </div>
  )
}

使用高阶组件的代码

javascript 复制代码
import React from 'react'
// 高阶组件 
import HocTemplate from './hoc/hocTemplate'
function LearnFunction05(props) {
    console.log(props.num);
    return (
        <div>
            <div>
            LearnFunction05
            </div> 
        </div>
    )
}

export default HocTemplate(LearnFunction05)

HocTemplate 是自己写好的高阶组件,以下是高阶组件的代码。

javascript 复制代码
import React from "react";
const HocTemplate = (WrappedComponent) => {
    return (props)=>{
        console.log(props);
        return (
            <div>
                <h1>这是高阶组件的头部</h1>
                <WrappedComponent {...props}/>
                <h1>这是高阶组件的尾部</h1>
            </div>
        )
    }
}
export default HocTemplate;

WrappedComponent这个是被修饰的组件,如上面的

export default HocTemplate(LearnFunction05)

这个就是将05这个方法传入进去修饰。

props丢失问题

如果在app传参给05组件的话 , 此时是拿不到传递参数,因为这个参数是被高阶组件修饰过的,所以已经传给高阶组件了。

可以用上面的方式将参数传给这个传过来的组件,这样的话,这个组件就可以接收到相应的信息。

相关推荐
csdn_aspnet5 分钟前
在 React 中使用 WebSockets 构建实时聊天应用程序
javascript·react.js·node.js
【ql君】qlexcel29 分钟前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
MiyueFE29 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子33 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
奋飛1 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序