重温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组件的话 , 此时是拿不到传递参数,因为这个参数是被高阶组件修饰过的,所以已经传给高阶组件了。

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

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试