AntdDesign美化，使其菜单点击有波纹效果

最新推荐文章于 2024-07-31 09:42:55 发布

闲D阿强

最新推荐文章于 2024-07-31 09:42:55 发布

阅读量1k

点赞数

文章标签： react vue.js reactjs html5 javascript

本文链接：https://blog.csdn.net/weixin_59502543/article/details/118614535

版权

本文介绍了如何在antd的菜单导航中添加点击特效，通过高阶组件withMaterialHoc实现。原有的实现由于每次刷新都会触发所有节点的动画，作者通过React.memo优化，确保只有被点击的节点才会更新，避免了不必要的刷新，实现了更佳的用户体验。文章还包含了关键代码示例和效果展示。

摘要由CSDN通过智能技术生成

点击没效果，总感觉少点啥

用antd自带菜单导航，点击菜单项的时候并没有什么特别cool的效果，那我们就自己动手加上吧。

借鉴了网上一大佬的实现，并在其基础上补全完善

大佬的实现

在其基础上我补全了功能，使其能够解决我所遇到的问题：

首先菜单项是多项并且单项点击切换的，大佬的实现并不能很好完成这一点，当存在多个具备该特效的节点时，一旦刷新，所有的节点都会触发刷新，那就是满屏的波纹，这一点必须解决。

开始重构以达到期望

首先做成一个高阶组件，这样就可以使用ta来对其他组件进行包装，使其具有点击特效，方便使用。

组件命名为withMaterialHoc，先贴出组件的实现：

withMaterialHoc/index.js

import React from 'react';
import { Ripple, calcEventRelativePos } from './ripple';

let withMaterialHoc = (WrappedComponent) => {
  return class WithMaterial extends React.Component {
    constructor(props) {
      super(props)
      this.isSwitchIntl = false;
      this.state = {
        spawnData: "",
        clickCount: 0,
        isSwitchIntl: false
      }
    }

    handleClick = (event) => {
      this.setState({
        spawnData: calcEventRelativePos(event),
        time: Date.now(),
        clickCount: this.state.clickCount + 1
      });
    }

    shouldComponentUpdate(nextProps, nextState) {
      if (nextProps.intlData != this.props.intlData) {
        return true;
      }
      if (nextState.clickCount && (nextState.clickCount - this.state.clickCount === 1)) {
        return true
      } else {
        return false
      }
    }

    handleRippleEnd = () => {
      let value = this.state.clickCount - 1
      if (value < 0) {
        value = 0
      }
      this.setState({
        clickCount: value
      })
    }

    render() {
      const { spawnData } = this.state;
      const { className, style } = this.props;
      return (
        <div
          className={`g-btn ${className || ' '}`}
          onClick={this.handleClick}
          style={style}
        >
          <WrappedComponent {...this.props} />
          <Ripple handleRippleEnd={this.handleRippleEnd} spawnData={spawnData} />
        </div>
      );
    }
  };
}

export default withMaterialHoc;

ripple.js：

import React, { useState, useEffect, useRef, Fragment,memo } from 'react';
import './index.css';
import { useSpring, animated } from 'react-spring';

function calcEventRelativePos(event) {
  const rect = event.target.getBoundingClientRect();
  return {
    x: event.clientX - rect.left,
    y: event.clientY - rect.top,
  };
}
function Ripple(props) {
  const [data, setData] = useState({ top: 0, left: 0, width: 0, height: 0 });
  const isInit = useRef(true);
  const rippleEl = useRef(null);
  const { spawnData, handleRippleEnd} = props;
  const rippleAnim = useSpring({
    from: {
      ...props.style,
      ...data,
      transform: 'scale(0)',
      opacity: 1,
    },
    to: !isInit.current ? { opacity: 0, transform: 'scale(2)' } : {},
    config: {
      duration: props.duration || 300,
    },
    onRest: () => {
      handleRippleEnd()
    },
    reset: true
  });

  useEffect(() => {
    if (isInit.current) {
      isInit.current = false;
    } else {
      const parentEl = rippleEl.current.parentElement;
      const size = Math.max(parentEl.offsetWidth, parentEl.offsetHeight);
      setData({
        width: size,
        height: size,
        top: spawnData.y - size / 2 || 0,
        left: spawnData.x - size / 2+50 || 50
      });
    }
  }, [spawnData]);
  return (
    <animated.span
          className="g-ripple"
          style={rippleAnim}
          ref={rippleEl}
        ></animated.span>
  );
}

Ripple = memo(Ripple)

export { Ripple, calcEventRelativePos };