无法使用带有功能组件的引用从父级调用子函数

Question

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

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

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)。如何访问子功能？任何帮助将不胜感激

Answer 1

我很早就开始接受useRefand的教育useImperativeHandle，但这是我对它的理解。

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

Parent> Middle>Child

组件结构，并且想要从Childin调用一个方法Parent。

要做到这一点，你可以传递ref通过Middle组件到Child允许Child方法在被调用Parent。

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

这是一个简化的演示：

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>