Блог

У меня есть множество ссылок, к которым я использую методы во время цикла. Однако в нем говорится об ошибке, что свойство «Список классов» не существует для типа «RefObject». Свойство ‘getBoundingClientRect’ не существует для типа ‘RefObject’.

Я добавил соответствующий код для получения дополнительной информации. Любая помощь будет признательна. Спасибо

 categories: [
    {
      id: 1,
      name: 'About',
      img: About,
      title: 'Problem Statement',
 }]
 const categoriesContentRef = useRef<React.RefObject<HTMLElement>[]>(
    Array(data.categories.length)
      .fill(null)
      .map(() => React.createRef())
  );

const clickHandler = (event: any) => {
    console.log(categoriesContentRef);
    console.log('Clicked');
    const id = event.currentTarget.id;
    console.log(id);
    const category = categoriesContentRef.current.filter((item) => {
      return item.classList.contains(`${id}`);
    })[0];
    console.log(category);
    if (category) {
      const categoryTop = category.getBoundingClientRect().top;
      const scrollTo = window.scrollY   categoryTop - offset;
      window.scrollTo({
        top: scrollTo,
        behavior: 'smooth',
      });
    }
  };

const Categories: React.FC<categoriesProps> = React.forwardRef(
  ({ allCategories, clickHandler }, ref: any): JSX.Element => {
    return (
      <CategoriesUlWrapper>
        {allCategories.categories.map((category, index) => {
          return (
            <CategoryLi
              ref={(elm) => (ref.current[index] = elm)}
              key={category.id}
              className={category.name}
              id={category.name}
              onClick={clickHandler}
            >
              <CategoryIcon>
                <ResponsiveImage src={category.img} alt={category.name} />
              </CategoryIcon>
              <CategoryName className="p-20-semi-bold">
                {category.name}
              </CategoryName>
            </CategoryLi>
          );
        })}
      </CategoriesUlWrapper>
    );
  }
);

<Categories
 clickHandler={clickHandler}
 allCategories={data}
 ref={categoriesContentRef}
 />

 

Это связано с тем, что созданная ссылка будет представлять собой массив с объектами ref, а не сам элемент HTMLElement.

Элемент массива имеет тип React.RefObject, а не тип HTMLElement, поэтому вам также необходимо получить доступ к текущему свойству, чтобы получить используемый HTMLElement.

 const category = categoriesContentRef.current.find((item) => {
  return item.current.classList.contains(`${id}`);
});
if (category) {
  const categoryTop = category.current.getBoundingClientRect().top;
}