使用 refs 对父子之间的通信做出反应

Question

我有 2 个功能组件：

function Parent(){
    const child = useRef(null);
    async function handleSubmit(){
       child.current.showAlert())
    }
    return (
        <form> 
            <Child ref={child}> </Child>
            <button type="button" onClick={handleSubmit}>
        </form>
    )
}

function Child(){
    function showAlert(){
        alert();
    }
}

为什么我无法访问child组件的function？

Answer 1

你必须转发 ref 并改变它的值，你没有这样做：

const Child = React.forwardRef((props, ref) => {
  function showAlert(){
    alert();
  }

  React.useImeperativeHandle(ref, () => ({ showAlert }), [])
  // ... JSX
})

阅读有关useImperativeHandle更多信息