javascript - useRef 未定义

Question

我想从父功能组件调用子功能组件的方法。我已经创建了 useRef 并通过 props 把它放到子组件中。我已经用 forwardRef 包装了子组件。但我得到一个未定义的参考。另外，我无法将 ref 放到 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 && 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>> & 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 当前（不是以前的）值？

标签： javascriptreactjs