在父类组件中使用函数组件引用

Posted 2023-02-23

【中文标题】在父类组件中使用函数组件引用

【英文标题】：Use function component ref inside a Parent class component

【发布时间】：2021-09-02 13:50:43

【问题描述】：

是否可以从类组件Parent 访问函数组件Child 的函数和变量？

class Parent extends React.Component
    constructor(props) 
        super(props);
        this.child = React.createRef();
    

    hello = () => 
        this.child.current.hello()
    

    render()
        return(
            <div>
                ...
                <Child ref=this.child />
                <button onClick=this.hello
            </div>
        )
    


const Child = forwardRef((props, ref) => 

  useImperativeHandle(ref, () => (

    hello() 
      alert("hello from Child");
    

  ));

  return <h1>Hi</h1>;
);

【问题讨论】：

这应该可以工作

【参考方案1】：

是的，你的实现应该可以工作。

你只需要改变你孩子的一件小事

const Child = React.forwardRef((props, ref) => 

  const hello = () => 
    alert('hello from child')
  

  React.useImperativeHandle(ref, () => (
    hello
  ))

  return <div>hi</div>
)