小编wat*_*ter的帖子

类型 '{ focus(): void; }' 缺少类型“HTMLDivElement”中的以下属性：align、addEventListener、removeEventListener、accessKey 和 234 more.ts(2740) index.d.ts(1041, 79)：预期类型来自此的返回类型签名。

这是组件代码：

import React, { forwardRef, useImperativeHandle, useRef } from "react";

type Ref = HTMLDivElement | null;
type SwiperProps = {
  children?: React.ReactNode | null;
  selectedIndex?: number;
};

const Swiper = forwardRef<Ref, SwiperProps>(
  ({ children = null }: SwiperProps, ref) => {
    const inputRef = useRef(null);
    useImperativeHandle(ref, () => ({
      focus() {
        inputRef.current.focus();
      }
    }));
    return (
      <div ref={ref}>
        {children}
        <input type="text" ref={inputRef} />
      </div>
    );
  }
);

export default …

在使用 React hooks 开发 Swiper 组件时，我通常使用 getBoundingClientRect().width，但在某些示例中 getBoundingClientRect().width 返回 0。

  useEffect(() => {
    const width = containerWrap.current.getBoundingClientRect().width;
    console.log(containerWrap.current.getBoundingClientRect().width)  // 0
    console.log(document.body.getBoundingClientRect().width);         // 750
    // it works well
    // setTimeout(() => {
    //   console.log(containerWrap.current.getBoundingClientRect().width)  // 750
    // }, 0)
    setSwiperWidth(width);
    if (selectedIndex >= count) {
      active.current = 0;
    }
    setSwipeStyle({...swipeStyle, transform: `translate3d(-${width * (selectedIndex >= count ? 1 : (selectedIndex + 1))}px, 0, 0)`, width: ((count + 2) * width) + 'px'})
    return () => {
      containerWrap.current.remove();
    }
  }, [])

我在useEffect函数中使用setTimeout，效果很好； …