Блог

Я хочу вызвать метод дочернего функционального компонента из родительского функционального компонента. Я создал useRef и поместил его через props в дочерний компонент. Я обернул дочерний компонент с помощью forwardRef . Но я получаю неопределенную ссылку. Кроме того, у меня нет способа поместить ссылку в элемент dom (только в функциональный компонент).

Родительский компонент:

 import Tree from '@c-tree'   
import React, {
  FunctionComponent,
  useEffect,
  useState,
  useContext,
  useRef,
} from 'react';


const NavTree: FunctionComponent = () => {
  
  const refTree = useRef();

useEffect(() => {

    if (refTree !== undefined amp;amp; refTree.current !== undefined) {
      // @ts-ignore
      console.log(refTree.current.handleCurrentSelected);
    }

    // eslint-disable-next-line
  }, [refTree]);

  const tree = () => {
    if (d?.items) {
      return (
        <Tree ref={refTree}>
          {d.items.map(s => (
            <Tree.Asset
              key={s.id}
              name={s.name}
              dataSelected={`${s.id}`}
              item={{
                name: s.name,
                tenantID: s.id,
                type: s?.tree?.name,
                children: [],
              }}
            />
          ))}
        </Tree>
      );
    }
  };

  return (
    <SideBar
      title={title}
    >
      <Box display="flex" flexDirection="column" height="100%">
        <StyledBox>{tree()}</StyledBox>
      </Box>
    **</SideBar>
  );
};
export default NavTree;
  

Дочерний компонент:

 import React, { useImperativeHandle, useState, ForwardRefExoticComponent, forwardRef, PropsWithRef } from 'react';

import TreeContext from './treeContext';
import TreeGroup from './components/TreeGroup';
import TreeEntity from './components/TreeEntity';

interface TabsStatic {
  Group: typeof TreeGroup;
  Asset: typeof TreeEntity;
}

type TabsComponent = ForwardRefExoticComponent<PropsWithRef<ITreeProps>> amp; TabsStatic;

interface ITreeProps {
  data?: {
    type: string;
    name: string;
    tenantID: number;
    children?: Array<Object>;
  }[];
  ref?: any;
}

export const Tree = forwardRef(({
  data,
}: ITreeProps, ref) => {
  const [contextValues, setContextValues] = useState({
    selected: null,
    opened: {},
  });

  useImperativeHandle(ref, () => (
    {
    handleCurrentSelected: (selectedName: string) => {
      setContextValues({
      ...contextValues,
      selected: selectedName,
      opened: {
        ...contextValues.opened,
        [selectedName]: !contextValues.opened[selectedName] || false,
      },
    });
  }}
  ));


  return (
    <TreeContext.Provider value={contextValues}>
        {
          React.Children.map(children, child => {
            return React.cloneElement(child, childrenProps);
          })
        }
    </TreeContext.Provider>
  );
}) as TabsComponent;

Tree.Group = TreeGroup;
Tree.Asset = TreeEntity;

export default Tree;
  

ОБНОВЛЕНО

Я могу получить значение useRef.current после повторного рендеринга. Как я могу получить текущее (не предыдущее) значение useRef?