Tree

TreeNode

• 在v3 升级到 v4版本的情况下， 原本的 loop 写法被提示报错， children of Tree is depreacated Please use treeData instead

相关问题可参考

• antd 之 warning children of Tree is deprecated Please use treeData instead
• Warning: children of Tree is deprecated. Please use treeData instead #22220

import React, { useRef, useEffect } from '@alipay/bigfish/react';
const EllipsisTip = ({text}: { text: string }) => {
  const divRef = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    if (divRef.current) {
      const parent = divRef.current.parentElement;
      const childs = Array.from(parent?.children ?? []);
      const total = childs.reduce((prev, next) => prev + Number(next?.getBoundingClientRect?.()?.width),0);
      const texts = divRef.current.innerText;
      const diff = total - divRef.current?.getBoundingClientRect?.().width;
      /** 每个字符平均宽度 */
      const textWidth = diff / texts.length;
      const parentWidht =   Number(parent?.getBoundingClientRect?.()?.width);
      const width = parentWidht - diff;
      const sliceNum = Math.floor(width / textWidth) - 3;
      divRef.current.style = 'overflow: hidden; white-space: nowrap;'
      divRef.current.innerText = texts.slice(0, sliceNum) + '...';
    }
  }, [divRef])
  return (
    <div ref={divRef}>{text}</div>
  )
}
export default EllipsisTip;