高阶组件hoc

天不生我鹤暮辞

于 2023-03-08 19:15:01 发布

阅读量94

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 react.js

本文链接：https://blog.youkuaiyun.com/userNing/article/details/129409596

文章介绍了如何在React中通过高阶组件(HOC)来增强组件功能，例如添加鼠标移动事件监听，动态更新xy坐标，并在Abc和Ccc两个组件中复用该功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方便组件复用


import React, { useEffect, useState } from 'react';

function Abc(props) {
    // console.log('a', props.xy);
    return (
        <div>

        </div>
    )
}
function Ccc(props) {
    // console.log('c', props.xy);
    return (
        <div>

        </div>
    )
}

// 高阶组件 HOC 接收一个组件 返回一个新组件的一个函数
// WrappedComponent 传进来的组件
function Hoc(WrappedComponent) {
    return function (props) {
        const [xy, setXy] = useState({
            x: 0,
            y: 0
        })

        useEffect(() => {
            const fn = ({ clientX, clientY }) => {
                setXy({
                    x: clientX,
                    y: clientY
                })
            }

            document.addEventListener('mousemove', fn)

            return () => document.addEventListener('mousemove', fn)
        }, [])

        return (
            <WrappedComponent xy={xy} />
        )
    }
}
export default Hoc(Abc)