reactjs - Setting useRefs dynamically react, typescript - Stack Overflow

admin管理员组

文章数量:1122846

import React, { useRef } from "react";

export default function test() {
  const divs = [1, 2, 3];
  const refs = useRef<(HTMLDivElement | null)[]>([]);
  return (
    <>
      {divs.map((v, i) => {
        <div ref={(el) => (refs.current[i] = el)}>test</div>;
      })}
    </>
  );
}

i want to do a preloader animation with the divs via the refs. Gives me a ts error when trying to assign refs to the dynamic elements:

Type '(el: HTMLDivElement | null) => HTMLDivElement | null' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.
  Type '(el: HTMLDivElement | null) => HTMLDivElement | null' is not assignable to type '(instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly)'.
    Type 'HTMLDivElement | null' is not assignable to type 'void | (() => VoidOrUndefinedOnly)'.
      Type 'null' is not assignable to type 'void | (() => VoidOrUndefinedOnly)'.ts(2322)

import React, { useRef } from "react";

export default function test() {
  const divs = [1, 2, 3];
  const refs = useRef<(HTMLDivElement | null)[]>([]);
  return (
    <>
      {divs.map((v, i) => {
        <div ref={(el) => (refs.current[i] = el)}>test</div>;
      })}
    </>
  );
}

i want to do a preloader animation with the divs via the refs. Gives me a ts error when trying to assign refs to the dynamic elements:

Type '(el: HTMLDivElement | null) => HTMLDivElement | null' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.
  Type '(el: HTMLDivElement | null) => HTMLDivElement | null' is not assignable to type '(instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly)'.
    Type 'HTMLDivElement | null' is not assignable to type 'void | (() => VoidOrUndefinedOnly)'.
      Type 'null' is not assignable to type 'void | (() => VoidOrUndefinedOnly)'.ts(2322)

• reactjs
• typescript

Share Improve this question Follow edited Nov 21, 2024 at 21:51 Silas Kierstein asked Nov 21, 2024 at 21:27 Silas KiersteinSilas Kierstein 1122 bronze badges 4

• Quick question, what is your use case in particular here? Instead of creating a ref for each div, you could create only one for the wrapper and access the children divs programmatically when needed. – moonstar-x Commented Nov 21, 2024 at 21:41
• i want to do a preloader animation with the divs via the refs. if not that would totally work! – Silas Kierstein Commented Nov 21, 2024 at 21:48
• I think your best bet in this case is to just have a ref provided to a parent and just access the child divs with ref.current.children. Keeping track of multiple refs like this is not necessary and could give issues if for some reason divs were to change. – moonstar-x Commented Nov 21, 2024 at 21:53
• Thanks moonstar! that worked really well! – Silas Kierstein Commented Nov 21, 2024 at 22:48

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

an assignment statement returns the value that was assigned And the ref function shouldn't return anything:

<div ref={(el) => {refs.current[i] = el}}>test</div>

本文标签： reactjsSetting useRefs dynamically reacttypescriptStack Overflow