无法使用带有功能组件的引用从父级调用子函数 [英] Unable to call child function from parent using refs with functional component

问题描述

最近我正在研究 React 并从父级调用子函数，但是当我在我的 ref 上调用 current 时，它给了我未定义的.

实际上 refs 完全适用于以前的父组件，甚至调用 useImperativeHandle 函数也是如此，但是当使用 useImperativeHandle 调用另一个子 refs 时，它在当前给出 undefined .

export const ZoneMapView = forwardRef((props,ref) => {const draw_map=useRef();useImperativeHandle(ref, () => ({调用:()=>{警报(draw_map.current)；}}));返回 (<div className="地图视图"><BaseMap ref={draw_map}/>

);});

正在从父组件调用调用方法，但在 alert(draw_map.current) 上未定义.如何访问子功能?任何帮助将不胜感激

解决方案

我很早就开始自己学习 useRef 和 useImperativeHandle，但这是我对它的理解.

从您的问题中提供的代码很难看出组件是如何设置的，但听起来您想从嵌套的子组件中调用方法.意思是你有一个

Parent > Middle > Child

组件结构，想从Parent中的Child调用一个方法.

为此，您可以通过 Middle 组件将 ref 传递给 Child 允许 Child在 Parent 中调用的方法.

然而，这似乎可以用更简单、更容易理解的方式来处理——例如，使用 Redux，或者将一个函数作为道具传递给孩子.如果没有看到完整的代码，就很难提出建议.

这是一个简化的演示:

const Child = React.forwardRef((props, ref) => {const buttonRef = React.useRef();const handleClick = (事件) =>{console.log('按钮点击')}const childStyle = {保证金:20}React.useImperativeHandle(ref, () => ({点击:() =>{buttonRef.current.click()}}))返回 (<button ref={buttonRef} style={childStyle} onClick={handleClick}>子组件</button>)})const Middle = ({childRef}) =>{const middleStyle = {显示:'弹性'，flexDirection: '列',alignItems: '中心',填充:20，背景颜色:'深灰色'}返回 (<div style={middleStyle}>中间组件<子引用={childRef}/>

)}const Parent = () =>{const childRef = React.useRef()const parentStyle = {显示:'弹性'，flexDirection: '列',alignItems: '中心',文本对齐:'居中'，背景颜色:'浅灰色'，填充:20}const handleMouseEnter = () =>{/** 从孩子那里调用一个方法*/childRef.current.click()}返回 (<div style={parentStyle} onMouseEnter={handleMouseEnter}><p>父组件
这个灰色区域的 onMouseEnter 按钮的 onClick 将被调用</p><Middle childRef={childRef}/>

)}ReactDOM.render(, 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>

Recently I am working on React and calling child function from parent in but when I call current on my ref it gives me undefined.

Actually refs are perfectly working for previous Parent component and even calling the useImperativeHandle functions as well but when using useImperativeHandle to call another child refs it gives undefined on current.

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>
  );
});

Call Method is being called from Parent component but then Getting undefined on alert(draw_map.current). How to access child functions ?Any Help would be appreciated

解决方案

I'm early in my own education of useRef and useImperativeHandle, but here's my understanding of it.

It's hard to tell from the code provided in your question how the components are setup, but it sounds like you want to call a method from a nested child component. Meaning you have a

Parent > Middle > Child

component structure, and want to call a method from Child in Parent.

To do this, you can pass the ref through the Middle component to the Child allowing the Child method to be called in the Parent.

However, it seems this could be handled in a simpler, easier to understand way - for example, using Redux, or passing a function to the child as a prop. Without seeing your full code it's hard to make recommendations.

Here's a simplified demo:

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>

这篇关于无法使用带有功能组件的引用从父级调用子函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！