高阶组件 ----- 自定义hook 两种实现_1102225556的博客-程序员宅基地

技术标签: react  

自定义hook 的实现 必须是use开头

实例如下:
自定义组件:

import React,{ useEffect, useState} from ‘react’

function Reuse() {
const [xy,setXy] = useState({ x:0, y:0})
const one = (e) => {
setXy({
x:e.clientX,
y:e.clientY
})
}
useEffect( () => {
document.addEventListener(‘mousemove’, one)
return () => {
document.removeEventListener(‘mousemove’, one)
}
},[])
return xy
}

export default Reuse

在页面里写:(使用自定义hook)

// import React, { Component } from ‘react’
// import useReuse from ‘@@/Reuse’
// function Pop(props) {
// const { x, y } = useReuse()
// return (
//


// {x} ==== {y}
//

// )
// }

// export default Pop

高阶组件就是 函数接收一个组件 并且最终返回一个组件

代码:

定义组件:
import React from ‘react’

function HandleChange(HandleChange) {
return class extends React.Component {
state = {
xy:{
x:0,
y:0,
}
}
componentDidMount () {
document.addEventListener(‘mousemove’, evt => {
this.setState({
xy:{
x:evt.clientX,
y:evt.clientY
}
})
})
}
render () {
const { xy } =this.state
return (

)
}
}
}

export default HandleChange

在页面里使用:

// import HandleChange from ‘@@/HandleChange’
// export class Pop extends Component {
// render() {
// const { xy } =this.props
// return (
//


// 鼠标的坐标:{xy.x} - {xy.y}
//

// )
// }
// }

// export default HandleChange(Pop)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cdxgg1102225556/article/details/115401728

智能推荐

ERROR 总结_error (10219): verilog hdl continuous assignment e_luoai_2666的博客-程序员宅基地

QuartusError (10028): Can’t resolve multiple constant drivers for net “prbs15[0]” at test.v(24)always @ (posedge clk or negedge rst_n) begin if(!rst_n) prbs15 <=15'b000_0000_0000_0001; else begin temp <= prbs15[14]^prbs15[13]; _error (10219): verilog hdl continuous assignment error at a_work_3.v(49): ob

ImportError:DLL load failed,找不到指定模块的解决办法-程序员宅基地

开始学习PIL,写了段生成简单图片的代码。from PIL import Image,ImageDrawimg = Image.new('RGB', (300, 200), (61, 61, 61))ImageDraw.Draw(img, 'RGB')with open('1.png', 'wb')as f: img.save(f, format = 'png')img....

thinkphp中的url跳转_thinkphp 模板a标签跳转 相对路径-程序员宅基地

最先想到的是a标签里面的target属性,_blank时,可以在新的lab窗体中打开新的页面但是现在要在php文件里面跳转,$this->redirect('/Supperman/outerMan');$this->display('Supperman:outerMan');这两者都只是在当前页面打开新的页面然后又试了一下header('Location:'.U('/Suppe_thinkphp 模板a标签跳转 相对路径

善用Eclipse的代码模板功能-程序员宅基地

Eclipse是个非常强大的IDE,作为一个JAVA程序员,几乎每天都与它打交道,但是它强大的功能都用到了吗?今天让我们来看一下Eclipse中的“代码模板”功能。什么是代码模板呢?举个例子,一个很常见的应用,如何在一个类中中建立一个main函数?这还不简单?话音未落,只见你在键盘上飞快的敲击着,三下五除二便搞定了。OK,打字很快的说。但是,是不是应

android http post请求-程序员宅基地

通过POST 提交数据很多情况下,需要通过POST 将本地的数据发送给服务器,如下是一段实际的代码public void MyFunction{HttpClient httpclient = new DefaultHttpClient();//你的URLHttpPost httppost = new HttpPost("http://www.eoeandroid.com/post_...

某公司员工分为若干类_某公司的雇员分为以下若干类: (1) employee:这是所有员工总的父类。 ① 属性:员工_script.boy的博客-程序员宅基地

某公司的雇员分为以下若干类:Employee:这是所有员工总的父类,属性:员工的姓名,员工的生日月份。方法:getSalary(int month) 根据参数月份来确定工资,如果该月员工过生日,则公司会额外奖励100元。SalariedEmployee:Employee的子类,拿固定工资的员工。属性:月薪。HourlyEmployee:Employee的子类,按小时拿工资的员工,每月工作超出160小时的部分按照1.5倍工资发放。属性:每小时的工资、每月工作的小时数。SalesEmployee:E_某公司的雇员分为以下若干类: (1) employee:这是所有员工总的父类。 ① 属性:员工

随便推点

TP6验证码 session跨域_tp6 跨域导致session无法获取-程序员宅基地

记录一次自己项目中遇到的session跨域问题项目框架: TP6.0功能需求: 后台登录时需要添加验证码验证,前后端分离,不同域名。点我进入官方手册安装验证码扩展点我查看验证码安装和使用详情开启中间件#文件路径:app/middleware.php<?php// 全局中间件定义文件return [ // 全局请求缓存 // \think\middleware\CheckRequestCache::class, // 多语言加载 // \think\m_tp6 跨域导致session无法获取

C# XML文件的读取-程序员宅基地

其中文本文件的内容为:<Skills> <Skill> <id>1</id> <name Language="CN">烤鸡腿</name> <demage>100</demage> </Skill> <Skill>...

蓝桥杯_带分数_带分数蓝桥杯c语言-程序员宅基地

100 可以表示为带分数的形式:100 = 3 + 69258 / 714 还可以表示为:100 = 82 + 3546 / 197 注意特征:带分数中,数字1~9分别出现且只出现一次(不包含0)。 类似这样的带分数,100 有 11 种表示法。题目要求:从标准输入读入一个正整数N (N<1000*1000)程序输出该数字用数码1~9不重复不遗漏地组成..._带分数蓝桥杯c语言

Redis修复aof文件-程序员宅基地

redis-check-aof --fix appendonly.aof

SpringBoot使用logback自定义配置时遇到的坑 --- 在 /tmp目录下自动生成spring.log文件-程序员宅基地

将<include resource="org/springframework/boot/logging/logback/base.xml"/>替换成<include resource="org/springframework/boot/logging/logback/defaults.xml" />之后,就不会生成spring.log文件了。...

python 安装opencv linux opencv 查看版本_linux查看pythonopencv版本-程序员宅基地

python 安装opencv linux opencv 查看版本_linux查看pythonopencv版本