无法通过React Hooks从父函数访问子函数。

Question

我需要用React Hooks从父组件调用子组件中的一个函数。

我试图根据我的用例来调整这个问题。React 16：当使用钩子和功能组件时，从父节点调用子节点的功能。 但我一直收到错误信息

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;

我到底做错了什么？

Answer 1

我想这是你的问题

    childRef.current(childRef.childFunction())

childRef.current 并不是一个函数。另外 childRef.childFunction() 是先运行的，这也不是一个函数。

childRef.current.childFunction 应该是一个函数，试试 childRef.current.childFunction() 而不是 childRef.current(childRef.childFunction())

---

从文档上看 useImperativeHandle 查阅 inputRef.current.focus():

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

在这个例子中，一个父级组件渲染了 <FancyInput ref={inputRef} /> 会叫 inputRef.current.focus().

根据评论进行编辑，供今后的游客参考。

const Child = forwardRef(({ref}) => {

应该是

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