react子组件传递方法给父组件?

作者站长头像
站长
· 阅读数 16

我网上搜了一下关于react父组件获取子组件的方法,一般都是用使用forwardRefuseImperativeHandle这两个hooks。我不明白之处在于:在子组件抛出的时候,直接把方法一起抛出可以吗?是有什么缺点吗?为什么还专门发明这两个hooks来获取子组件内容?例如:

import { useState,useEffect } from "react";

export default function Msg(parentsProps){
  const [msg, setMsg] = useState("");
  useEffect(()=>{
    setMsg(msg=>msg+parentsProps);
  },[parentsProps])
  
  let context=(
  <>
    <div>{{msg}}</div>
  </>)
  return [context,setMsg];
}

如果父组件需要setMsg的话,父组件直接解构就好了。

回复
1个回答
avatar
test
2024-07-20

关于题主提到的

如果父组件需要setMsg的话,父组件直接解构就好了。

这种属于设计的问题,可以看官方教程在第一次讲ref的时候就提到的 勿过度使用 Refs

个人认为专门写两个hook抛出对应方法其实利于后续的代码提示

另外一个点我觉得应该是函数组件是没有实例的,这与Class组件不同,所以需要这样去做。参考 将函数组件转换成 class 组件

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容