Jak uzyć `ref` jako `prop` do innego komponentu

Hej, mam strukture jak nizej, tzn mam komponent BookTree ktory tworzy refa i podaje go do komponentu Tree ktory poprzez useImperativeHandle zwraca ref z search i metoda setSearch. Chcialbym podac tego samego refa do komponentu TreeOptions i tam miec input ktory uzywa tej wartosci z refa i ustawia ta wartosc metoda setSearch. Niestety obecnie caly czas treeRef w komponencie TreeOptions jest null. Jak to poprawnie zrobic?

export const TreeOptions = ({ treeRef }: { treeRef: TreeRef }) => {
  return (
    <div className='flex flex-col gap-1'>
      <div className='flex items-center gap-1.5 p-2'>
        <Button
          className='h-fit p-2'
          variant='ghost'
          onClick={() => treeRef.openAll()}
        >
          <CopyPlusIcon />
        </Button>
        <Button
          className='h-fit p-2'
          variant='ghost'
          onClick={() => treeRef.closeAll()}
        >
          <CopyMinusIcon />
        </Button>
        <Input
          className='w-[200px]'
          placeholder='Szukaj...'
          value={treeRef?.search}
          onChange={(e) => treeRef.setSearch(e.target.value)}
        />
      </div>
    </div>
  );
};

export function BookTree({
  name,
  href,
  edit = false,
}: {
  name: string;
  href?: string;
  edit?: boolean;
}) {
  const ref = useRef<TreeRef>(null);

  const { data, isLoading } = useBook(name);
  if (isLoading) return <div>Loading...</div>;
  if (!data) return <div>Failed to load...</div>;

  return (
    <div>
      {edit ? (
        <EditTreeOptions treeRef={ref.current!} />
      ) : (
        <TreeOptions treeRef={ref.current!} />
      )}
      <Tree data={toTreeNodeType(data.content)} ref={ref} href={href} />
    </div>
  );
}

Przekazywanie wartości ref do innego komponentu można zrobić za pomocą forwardRef

https://react.dev/reference/react/forwardRef

Xarviel napisał(a):

Przekazywanie wartości ref do innego komponentu można zrobić za pomocą forwardRef

https://react.dev/reference/react/forwardRef

Zamiast przekazywac ref.current w TreeOptions przekazalem ref i zadzialalo. Czy forwardRef nie powinno sie uzywac tylko jesli chcemy albo przeslac dalej refa ktory ma byc uzyty w komponenecie jako ref albo po to zeby uzyc go razem z useImperativeHandle, a niekoniecznie w moim przypadku?

Tuptuś Tupta napisał(a):

Czy forwardRef nie powinno sie uzywac tylko jesli chcemy albo przeslac dalej refa ktory ma byc uzyty w komponenecie jako ref albo po to zeby uzyc go razem z useImperativeHandle, a niekoniecznie w moim przypadku?

To znaczy, myślałem o dodaniu tego w komponencie <Tree />, bo tam przekazujesz ref, ale nie miało to żadnego związku z tym błędem xD

Najprościej przekaż go jako inny property, np otherRef. Będzie normalnie działać.

PS: jeśli koniecznie chcesz użyć ref={} (czego w sumie nie musisz robić), to skorzystaj z React.forwardRef().

Tutaj masz dokumentację: https://react.dev/reference/react/forwardRef