react高阶成分(HOC)例子效果

news/2024/7/23 21:14:20 标签: javascript, 开发语言, ecmascript

使用React函数式组件写了一个身份验证的一个功能,示例通过高阶组件实现的一个效果展示:

javascript">import React, { useState, useEffect } from 'react';

// 定义一个高阶组件,它接受一个组件作为输入,并返回一个新的包装组件
const withAuthentication = (WrappedComponent) => {
  return function WithAuthentication(props) {
    const [isAuthenticated, setIsAuthenticated] = useState(false);

    // 模拟身份验证过程,实际情况可能需要异步请求服务器验证
    useEffect(() => {
      // 假设用户已登录
      setIsAuthenticated(true);
    }, []);

    // 根据身份验证状态渲染不同的内容
    if (isAuthenticated) {
      return <WrappedComponent {...props} />;
    } else {
      return <p>请先登录</p>;
    }
  };
};

// 创建一个普通的函数式组件
function MyComponent() {
  return <div>这是需要身份验证的组件</div>;
}

// 使用高阶组件包装MyComponent以添加身份验证功能
const AuthenticatedComponent = withAuthentication(MyComponent);

// 在应用中使用包装后的组件
function App() {
  return (
    <div>
      <h1>我的应用</h1>
      <AuthenticatedComponent />
    </div>
  );
}

export default App;

在这个示例中,withAuthentication 是一个高阶组件,它接受一个函数式组件 WrappedComponent 作为参数,并返回一个新的函数式组件 WithAuthentication。在 WithAuthentication 组件内部,我们使用了 useState 和 useEffect 钩子来模拟身份验证过程,并根据身份验证状态渲染不同的内容。

最后,我们在应用中使用了 AuthenticatedComponent,它是通过高阶组件 withAuthentication 包装过的 MyComponent,从而添加了身份验证功能。

这是一个适用于React函数式组件的高阶组件示例,可以帮助你在函数式组件中实现类似的功能封装和复用。可以根据自己的需求进行代码测试。


http://www.niftyadmin.cn/n/5130699.html

相关文章

CSRF防范介绍之一

一、前言 CSRF是Cross Site Request Forgery的缩写&#xff0c;即跨站请求伪造&#xff0c;CSRF攻击是借助受害者的Cookie骗取服务器的信任&#xff0c;以受害者名义伪造请求对服务器进行攻击&#xff0c;一直以来有个疑问&#xff0c;前后端分离使用LocalStorage存储用户令牌…

[SQL开发笔记]DELETE 语句:删除表中的行

一、功能描述: DELETE 语句:用于删除表中的行 二、DELETE 语句语法详解: DELETE 语法 DELETE FROM table_nameWHERE some_column=some_value; 三、DELETE 语句开发实例: 目标数据库及表:使用 DRobot数据库,"T_Drobot&

剑指JUC原理-5.synchronized底层原理

Java对象头 以32位虚拟机为例&#xff1a; 普通对象 在Java虚拟机中&#xff0c;每个对象都有一个对象头&#xff08;Object Header&#xff09;&#xff0c;其中包含了一些用于管理对象的元数据信息。对象头通常由两部分组成&#xff1a;mark word&#xff08;标记字&#x…

【面向对象程序设计】Java大作业 汽车租赁管理系统V4.0

前言 自己大二时候使用JavaMysql写的租车系统大作业V4.0黑窗口版的一个记录&#xff0c;简简单单的黑窗口&#xff0c;不是炫酷的前后端分离也没用GUI&#xff0c;但功能完善&#xff0c;该有都有&#xff0c;当时得分也还是挺不错的 技术栈 Java (jdk8)Mysql 资源包内容 …

嵌入式学习笔记(64)指针带来的一些符号的理解

我们写的代码是给编译器看的&#xff0c;代码要想达到你想象的结果&#xff0c;就必需要编译器对你的代码的理解和你自己对代码的理解一样。编译器理解代码就是理解的符号&#xff0c;所以我们要正确理解C语言中的符号&#xff0c;才能像编译器一样思考程序、理解代码。 3.2.1…

Proteus仿真--从左往右流水灯仿真(仿真文件+程序)

本文主要介绍基于51单片机的流水灯仿真&#xff08;完整仿真源文件及代码见文末链接&#xff09; 仿真运行视频 Proteus仿真--基于51单片机的流水灯仿真&#xff08;从左往右&#xff09; 附完整Proteus仿真资料代码资料 百度网盘链接: https://pan.baidu.com/s/1aZH13zwQkNB7…

jmeter界面压测过程卡死解决思路

1、排查压测机的资源是否充足&#xff1b; 2、检查jmeter压测脚本&#xff0c;除聚合报告的所有组件关闭&#xff1b; 我在压测过程中出现频繁卡死&#xff0c;就是查看结果数和断言结果信息量过多导致&#xff1a; 3、直接用非gui界面形式&#xff0c;也就是脚本形式压测。

RabbitMQ生产者的可靠性

目录 MQ使用时会出现的问题 生产者的可靠性 1、生产者重连 2、生产者确认 3、数据持久化 交换机持久化 队列持久化 消息持久化 LazyQueue懒加载 MQ使用时会出现的问题 发送消息时丢失&#xff1a; 生产者发送消息时连接MQ失败生产者发送消息到达MQ后未找到Exchange生…