Reactjs Can'；t使用React钩子从父函数访问子函数

我需要使用React钩子从父组件调用子组件中的函数

我试图使这个问题适应我的用例，但我不断得到错误

TypeError: childRef.childFunction is not a function

我的父组件如下所示：

import React, { useRef, useEffect } from 'react';
import Child from './child'

function Parent() {
    const parentRef = useRef()
    const childRef = useRef()

    const callChildFunction = () => {
        childRef.current(childRef.childFunction())
    }

    useEffect(() => {
        if (parentRef && childRef) {
            callChildFunction();
        }
    }, [parentRef, childRef])

    return (
        <div ref={parentRef} className="parentContainer">
            PARENT
            <Child ref={childRef}/>
        </div>
    );
}

export default Parent;

import React, { forwardRef, useImperativeHandle } from 'react';

const Child = forwardRef(({ref}) => {
    useImperativeHandle(ref, () => ({
        childFunction() {
            console.log("CHILD FUNCTION")
        }
      })); 

    return (
        <div className="childContainer">
            CHILD
        </div>
    );
})

export default Child;

import React，{useRef，useffect}来自“React”；
从“./Child”导入子项
函数父函数（）{
const parentRef=useRef（）
const childRef=useRef（）
const callChildFunction=（）=>{
childRef.current（childRef.childFunction（））
}
useffect（（）=>{
if（parentRef&&childRef）{
callChildFunction（）；
}
}，[parentRef，childRef]）
返回(
父母亲
);
}
导出默认父对象；

我的子组件如下所示：

import React, { useRef, useEffect } from 'react';
import Child from './child'

function Parent() {
    const parentRef = useRef()
    const childRef = useRef()

    const callChildFunction = () => {
        childRef.current(childRef.childFunction())
    }

    useEffect(() => {
        if (parentRef && childRef) {
            callChildFunction();
        }
    }, [parentRef, childRef])

    return (
        <div ref={parentRef} className="parentContainer">
            PARENT
            <Child ref={childRef}/>
        </div>
    );
}

export default Parent;

import React, { forwardRef, useImperativeHandle } from 'react';

const Child = forwardRef(({ref}) => {
    useImperativeHandle(ref, () => ({
        childFunction() {
            console.log("CHILD FUNCTION")
        }
      })); 

    return (
        <div className="childContainer">
            CHILD
        </div>
    );
})

export default Child;

import React，{forwardRef，useImperialiveHandle}来自'React'；
const Child=forwardRef（{ref}）=>{
使用命令式句柄（参考，（）=>({
childFunction（）{
console.log（“子函数”）
}
})); 
返回(
小孩
);
})
导出默认子对象；

---

我做错了什么？我想这是你的问题

    childRef.current(childRef.childFunction())

childRef.current

不是函数。另外，先运行

childRef.childFunction（）

，它也不是函数

childRef.current.childFunction

应该是函数，请尝试

childRef.current.childFunction（）

而不是

childRef.current（childRef.childFunction（））

---

从

useImperialiveHandle

上的文档中，查看

inputRef.current.focus（）的用法。

：

应该是

const child = forwardRef(({}, ref) => {

---

有意思，我不知道这个钩子。但是从文档

来看，在大多数情况下，应该避免使用refs的命令式代码。为什么不将状态提升到父级呢。或者使用redux或上下文挂钩在组件之间传递值和函数？
childRef.current（childRef.childFunction（））
-这是故意的吗？您不应该直接调用
childRef.current.childFunction（）
吗？我之所以要这样做，是因为我有一个子组件，它使用上下文中的数据，并将数据作为输入，但是当上下文从父组件重置时，子组件中的上下文不会刷新-但是用例非常特殊-我尝试了childRef.current（childRef.childFunction（））和childRef.current.childFunction（）-这两个都会为我产生相同的错误。我想我使用了第一个，因为我在修改示例中的函数，他们在一系列参考上使用了forEach，同时也混合了参考和道具。ref不是道具，所以我不得不提出forwardRef（（{}，ref）=>{etc…谢谢，为未来的观众更新了答案。我有一个关于家长如何调用inputRef.current.focus（）的问题？你会怎么做？我不再使用这种方法。如果我需要在我的孩子身上运行一些东西，我要么修改一个入站的道具，要么做一些事情使useEffect运行。我认为这是一种反模式。