我目前有一个父组件，有两个子组件。
在第一个子组件中有一个按钮，当我单击该按钮时，我想访问第二个子组件中的函数。
我知道一点关于forwardRef的知识，以及如何从父组件访问子函数，而不是从子组件。
我希望这是有意义的。我试着搜索这方面的文档，但我看到的都是父访问子函数，反之亦然，但不是从子组件访问另一个子函数。
添加一点代码：
import Child1 from './child1';
import Child2 from './child2';
const parent = () => {
const childRef = useRef();
return (
<Child1 onZoomHandler={childRef.current?.zoomHandler} />
<Child2 ref={childRef} />
)
}
export default parent;儿童1
const child1 = (props) => {
const zoomHandler = () => {
props.onZoomHandler();
}
return (
<Button onClick={zoomHandler} />
)
}
export default child1;Child2
import { forwardRef, useImperativeHandle } from 'react';
const child2 = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
zoomHandler
}));
const zoomHandler =() => {
}
return (
<div ref={ref} />
)
}
export default child2;我得到的错误是（在第一个孩子上）：
props.onZoomHandler is not a function
2条答案
按热度按时间cs7cruho1#
第一次渲染
Parent时，childRef.current为undefined，因此onZoomHandler的值为undefined。在
Child2中更新childRef不会导致重新渲染，因此onZoomHandler仍为undefined。在
Parent中声明一个zoomHandler函数，并将其传递给Child1。zoomHandler在调用ref时调用ref中的函数。2vuwiymt2#
看起来你想从一个兄弟组件触发一个函数。通过使用React中的一个基本概念“状态提升”，可以很容易地实现这个功能。你可以在这里了解更多信息：[https://react.dev/learn/sharing-state-between-componentsenter链接说明在此][1]。
要实现这个解决方案，您需要在父组件中创建一个状态。然后，将state的update函数（通常是setState）作为prop传递给第一个组件。通过这样做，您可以在第一个组件中触发所需的功能，这反过来会更新父组件中的状态。这个更新后的状态可以作为一个属性传递给第二个子组件，使它能够根据您的特定需求执行操作。这种方法有效地促进了兄弟组件之间的通信和交互。