reactjs - 如何将 REF 与运动库 REACT 一起使用

Question

我开始涉足 React。目前我有3个组件。一个父组件，它返回一个具有内部子级的子级。

<Parent>
    <Child>
        <InnerChild></InnerChild>
    </Child>
</Parent>

我的目标是，当 innerchild 执行一个动作时，它会执行一个回调并执行 child 中的一个方法。

在此链接之后，我尝试对子调用子方法进行 REF 从父

Child.js（使用运动库https://github.com/framer/motion）

export const Positioner = React.forwardRef(({ 
    zIndex = 200, 
}, ref) => {
    const [posZIndex, setIndex] = React.useState(zIndex);
    const toggleZIndex = () => {
        alert("child action triggered")
    };
    return (
        <motion.div style={styles} {...framer} ref={ref}>
            {children}
        </motion.div>
    );
})

父.js

export const Parent = props => {

    const childRef = useRef();
    const handleMenuToggleCallback = (isOpen) => {
        console.log("handleMenuToggleCallback is called");
        this.childRef.toggleZIndex (isOpen);
    }

    return      
       <Child ref={childRef}>
            <InnerChild handleCallback={handleMenuToggleCallback}/>
        </Positioner>
}

内部孩子成功执行回调。但不幸的是 childRef 不起作用。我可以看到这个错误No ref found. Ensure components created with motion.custom forward refs using React.forwardRef`

请问如何正确通知我的子功能组件。

标签： reactjs