react window resize

目的 响应式处理 fixed 定位的二级 tabbar 的宽度

下面这段代码是一开始的做法，只能在初始化时更新一下宽度，用户屏幕宽度如果有变化时不能自动调整。

  const ref = React.useRef(null);
  React.useEffect(() => {
    const parentWidth = ref.current ? ref.current.parentNode.offsetWidth : 0
    ref.current.style.width = `${parentWidth}px`
  }, [ref.current]);

  return (
    <>
      <Toolbar ref={ref}>
        .....
     </Toolbar>
    </>
  );

最终是参考了 React Hooks — useObserve (use ResizeObserver Custom Hook) 这篇文章，这篇文章基本上是一步步，手把手教实现自定义 resize 的 hook 组件。因为是medium上的，访问要上墙，直接将最后代码贴出来

import {useEffect, useRef} from 'react';
import PropTypes from 'prop-types';
import ResizeObserver from "resize-observer-polyfill";

const useObserver = ({ callback, element }) => {

  const current = element && element.current;

  const observer = useRef(null);

  useEffect(() => {
      // if we are already observing old element
      if (observer && observer.current && current) {
        observer.current.unobserve(current);
      }
      const resizeObserverOrPolyfill =  ResizeObserver;
      observer.current = new resizeObserverOrPolyfill(callback);
      observe();

      return () => {
        if (observer && observer.current && element &&
           element.current) {
          observer.current.unobserve(element.current);
        }
      };
  }, [current]);

  const observe = () => {
    if (element && element.current && observer.current) {
      observer.current.observe(element.current);
    }
  };

};

useObserver.propTypes = {
  element: PropTypes.object,
  callback: PropTypes.func,
};

export default useObserver;

使用:

import useObserver from './ResizeObserver';
...

const layoutA = {
  const measuredRef = React.useRef(null);
  useObserver({
    element: measuredRef,
    callback: element=>{
      let target = element[0].target
      target.firstChild.style.width = `${target.offsetWidth}px`;  // 将当前节点的宽度设置给子节点
    }
  })

  return (
    <>
      <Grid ref={measuredRef} >
        <tabbar> ... </tabbar>
        ....
      </Grid>
    <>
  )
}

参考文章如下：
我该如何测量 DOM 节点？
React Hooks — useObserve (use ResizeObserver Custom Hook)