最近我正在研究 React 并从父级调用子函数，但是当我在引用上调用 current 时，它给了我未定义的信息。
实际上 refs 非常适合以前的父组件，甚至可以调用useImperativeHandle功能也一样，但是使用时useImperativeHandle要调用另一个子引用，它会在当前上给出未定义的值。
export const ZoneMapView = forwardRef((props,ref) => {
const draw_map=useRef();
useImperativeHandle(ref, () => ({
call: ()=> {
alert(draw_map.current);
}
}));
return (
<div className="map-view">
<BaseMap ref={draw_map}/>
</div>
);
});
正在从父组件调用调用方法，但随后未定义alert(draw_map.current)。如何访问子函数？任何帮助将不胜感激
我自己的教育还很早useRef and useImperativeHandle，但这是我的理解。
从问题中提供的代码中很难判断组件是如何设置的，但听起来您想从嵌套子组件中调用方法。意味着你有一个
Parent > Middle > Child
组件结构，并且想要从中调用方法Child in Parent.
为此，您可以通过ref通过Middle组件到Child允许Child中调用的方法Parent.
然而，这似乎可以用更简单、更容易理解的方式来处理——例如，使用 Redux，或者将函数作为 prop 传递给子进程。如果没有看到完整的代码，就很难提出建议。
这是一个简化的演示：
const Child = React.forwardRef((props, ref) => {
const buttonRef = React.useRef();
const handleClick = (event) => {
console.log('button click')
}
const childStyle = {
margin: 20
}
React.useImperativeHandle(ref, () => ({
click: () => {
buttonRef.current.click()
}
}))
return (
<button ref={buttonRef} style={childStyle} onClick={handleClick}>Child Component</button>
)
})
const Middle = ({childRef}) => {
const middleStyle = {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: 20,
backgroundColor: 'darkgray'
}
return (
<div style={middleStyle}>
Middle Component
<Child ref={childRef} />
</div>
)
}
const Parent = () => {
const childRef = React.useRef()
const parentStyle = {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
backgroundColor: 'lightgray',
padding: 20
}
const handleMouseEnter = () => {
/*
* CALL A METHOD FROM THE CHILD
*/
childRef.current.click()
}
return (
<div style={parentStyle} onMouseEnter={handleMouseEnter}>
<p>
Parent Component<br />
onMouseEnter of this gray area the onClick of the button will be called
</p>
<Middle childRef={childRef} />
</div>
)
}
ReactDOM.render(<Parent />, document.getElementById("app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
