如何使用Hook（ForwardRef概念）在子组件中调用父方法

Question

我尝试了以下代码，但失败了，因此，这是我的父组件：

    import React from 'react'
import ChildComponent from './ChildComponent';

const ParentComponent = (props) => {

    //step 1
    // const inputRef = React.createRef();
    const buttonRef = React.useRef();
    const focusHandler = () => {
        alert("hi");
    }

    return (
        <div>
            {/* In parent, we generally pass reference to child which we dint do here, lets see if props children help here */}
            {props.children}
            <ChildComponent ref="buttonRef" />

        </div>
    )
}

export default ParentComponent;

这是我的子组件：

import React from 'react'

const ChildComponent = React.forwardRef((props, ref) => {
    return (
        <div>
            <button onClick={ref.focusHandler}>Focus Input</button>      
        </div>
    )
})

export default ChildComponent;

在子组件中单击上面的按钮，我希望调用父方法。如何才能做到这一点？编辑

Answer 1

只需将父组件中的ref替换为focusHandler，如下所示

<ChildComponent focusHandler={focusHandler} />

然后在ChildComponent中，也删除ref。

Answer 2

如果你想知道在这种情况下如何使用ref（即使这不是传递回调的推荐方式），你需要分配焦点处理程序键，并使用ref与ref.current，参考组件和道具文档。

const ParentComponent = () => {
  const buttonRef = React.useRef({ focusHandler: () => alert("hi") });

  return (
    <div>
      <ChildComponent ref={buttonRef} />
    </div>
  );
};

const ChildComponent = React.forwardRef((props, ref) => {
  return (
    <div>
      <button onClick={ref.current.focusHandler}>Focus Input</button>
    </div>
  );
});

Answer 3

出现错误的原因是函数组件中的ref需要使用ref={buttonRef}传递，而不是ref=“buttonRef”。类组件可以使用字符串引用，但即使在那里也不推荐使用。

对于从父组件调用函数，您不需要使用ref来执行此操作。因此，如果这是使用ref的唯一原因，则可以删除ref。相反，将函数作为道具传递：

const ParentComponent = (props) => {
    const focusHandler = () => {
        alert("hi");
    }

    return (
        <div>
            <ChildComponent focusHandler={focusHandler} />
        </div>
    )
}

const ChildComponent = (props) => {
    return (
        <div>
            <button onClick={props.focusHandler}>Focus Input</button>      
        </div>
    )
}