下面是我的代码中的一些片段。我有一个函数组件定义为：

function AssociationViewer(props) {
    const core = React.useRef<GraphCore | null>(null);
    const dataService = React.useRef<DataService>(new DataService(props.graphApi));
    const selectionBoxDimensions = React.useRef(null);
    const initialGraphRender = React.useRef<boolean>(false);
    const filterRef = React.useRef(null);

    const getElementRef = React.useCallback((el) => {
        if (el && !core.current) {
            core.current = new GraphCore({ container: el });
            // TODO: Change data service to accept core as an argument and initialize it here?
            dataService.current.addGraphDataFn = (opts) => getRksGraph().addData(opts);
            dataService.current.setGraphDataFn = (opts) => getRksGraph().setData(opts);
            onMount();
            return onUnmount;
        }
    }, []);
.
.
.
    return (
        <>
            {props.enableSearch && <div style={{zIndex: 10000, position: 'absolute', marginTop: 10, right: 15}}>
                <button onClick={flashSearchedNodes}>Search</button>
                <input
                    value={searchText}
                    placeholder='Find node by text'
                    onKeyDown={(e) => e.key == 'Enter' && flashSearchedNodes()}
                    onChange={(e) => setSearchText(e.target.value)}
                />
                <input readOnly style={{width: '60px', textAlign: 'center'}} type="text" value={searchedElesDisplayText} />
                <button onClick={prevFoundNode}>Prev</button>
                <button onClick={nextFoundNode}>Next</button>
                <button onClick={cancelFlashNodes}>Clear</button>
            </div>}
            <div
                style={{ height: '100%', width: '100%' }}
                id={props.componentId || 'kms-graph-core-component'}
                ref={getElementRef}
            ></div>
            {core.current && (
                <GraphTooltip
                    tooltip={props.tooltipCallback}
                    tooltipHoverHideDelay={props.tooltipHoverHideDelay}
                    tooltipHoverShowDelay={props.tooltipHoverShowDelay}
                    tippyOptions={props.tippyOptions}
                    core={core.current}
                />
            )}
            {props.loadingMask && !hasCustomLoadMask() && (
                <DefaultLoadMask
                    active={showLoading}
                    loadingClass={getLoadingClass()}
                    onClick={() => {
                        setShowLoading(false);
                    }}
                />
            )}
            {props.loadingMask && showLoading && hasCustomLoadMask() && props.customLoadingMask()}
        </>
    );
}

export default AssociationViewer;

我有一个angular应用程序，它使用一个服务来调用这个组件，如下所示：

ReactService.render(AssociationViewer,
{
     ref: function (el) {
          reactElement = el;
     },
     component: 'association-viewer-1',
     getImageUrl: getImageUrl,
     graphApi: graphApi,
     pairElements: $ctrl.pairElements,
     theme: theme,
     view: 'testView'
}
'miniGraphContainer',
() => {
          if ($ctrl.pairElements.edges) {
               reactElement.core.select($ctls.pairElements.edges($ctrl.currEdge).id);
          }
}

下面是GraphTooltip：

import React from 'react';
import GraphCore from '../GraphCore';

function useForceUpdate() {
    const [value, setValue] = React.useState(0);
    return () => setValue((value) => ++value);
}

interface IGraphTooltipProps{
    tooltipHoverShowDelay: number;
    tooltipHoverHideDelay: number;
    core: GraphCore;
    tooltip: Function;
    tippyOptions: any;
}

const GraphTooltip = (props: IGraphTooltipProps) => {
    const tooltipRef = React.useRef<React.Element>(null);
    const forceUpdate = useForceUpdate();

    const setRef = (ref) => {
        tooltipRef.current = ref;
    };

    const [currentElement, setCurrentElement] = React.useState<React.Element>();

    React.useEffect(() => {
        props.core.getAllSubGraphs().forEach((subgraph) => {
            subgraph.setOptions({
                tooltip: {
                    domElementCallback: (e) => {
                        // this isn't changing so it's not picking up a render loop
                        setCurrentElement(e);
                        forceUpdate();
                        return tooltipRef.current;
                    },
                    hoverShowDelay: props.tooltipHoverShowDelay,
                    hoverHideDelay: props.tooltipHoverHideDelay,
                    options: props.tippyOptions
                }
            });
        });
    }, []);

    return <>{props.tooltip(setRef, currentElement, props.core)}</>;
};

export default GraphTooltip;

当触发导致此ReactService呈现AssociationViewer组件的事件时，我得到警告：功能组件不能被引用。尝试访问此引用将失败。你的意思是使用React.forwardRef（）吗？此外，reactElement是未定义的，因为无法访问ref。如何在AssociationViewer组件中使用React.forwardRef（）将引用转发到调用组件？