umi初始化+hooks

封装群聊消息回到顶部

import { useEffect, useRef, useCallback } from 'react'

const useGoButtom = (ref) => {
  const timer = useRef(null);
  const srollStop = useCallback(() => {
    clearInterval(timer.current);
    timer.current = null;
  }, [])

  const goBottom = () => {
    let top = ref.current.scrollTop;
    timer.current = setInterval(() => {
      if (top >= ref.current.scrollHeight) {
        srollStop();
        return;
      }
      top += 20;
      ref.current.scrollTop = top;
    }, 10)
  }

  useEffect(() => {
    window.addEventListener('mousewheel', srollStop)
    return () => {
      window.removeEventListener('mousewheel', srollStop);
      srollStop;
    }
  }, [])
  return {
    goBottom,
  }
}

export default useGoButtom;

群聊消息markdown语法转换html

 useEffect(() => {
  marked.setOptions({
    renderer: new marked.Renderer(),
    highlight: function (code) {
      return hljs.highlightAuto(code).value;
    },
    pedantic: false,
    gfm: true,
    tables: true,
    // 遇到 \n 会换行
    breaks: true,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    xhtml: false,
  });
}, []);

const onImgClick = (e) => {
  if (e.target?.localName !== 'img') {
    return;
  }
  setImgSrc(e.target?.src);
  setImgVisible(true);
};

<Image
  src={imgSrc}
  style={{ display: 'none' }}
  preview={{
    visible: imgVisible,
    src: imgSrc,
    onVisibleChange: (value) => {
      setImgVisible(value);
    },
  }}
/>