javascript - 如何仅在省略号时激活工具提示？

Question

当我起两个名字时。在整页中，我可以看到两个名字，所以没有工具提示也没有省略号，没关系。但是，当我调整大小时，省略号会显示，但工具提示直到我重新加载页面时才会激活。

const Name = () => {
  const ref = useRef(null);
  const [tooltip, setTooltip] = useState(false);
  useEffect(() => {
    if (!tooltip && ref.current.offsetWidth > ref.current.scrollWidth) {
      setTooltip(true);
    }
  }, [tooltip]);

  if (tooltip) {
    return (
      <Tooltip
        styles={nameTooltipStyle}
        content={name.map(nm => (
          <div key={nm.id} className="tooltipName">
            <div className="label">
              <li className="list">{nm.name}</li>
            </div>
          </div>
        ))}
      >
        <div ref={ref} className="name">
          {Name}
        </div>
      </Tooltip>
    );
  }
  return (
    <div ref={ref} className="name">
      {name}
    </div>
  );
};

Answer 1

如果您想在调整窗口大小时激活工具提示，可以使用 resize 事件监听器:-

window.addEventListener('resize', function(){
    if (!tooltip && ref.current.offsetWidth > ref.current.scrollWidth) {
        setTooltip(true);
    }
});

请注意，调整窗口大小时会多次触发此事件。我鼓励您使用去抖动的概念来优化性能。