我需要使用React Hooks从父组件中调用子组件中的函数。
我试图使这个问题适应我的用例React 16: Call children's function from parent when using hooks and functional component ,但我不断收到错误消息
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;
我在做什么错了?
答案 0 :(得分: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) => {