react 这种组件化设计框架,怎么能拿到子组件的值呢?

查看 97|回复 10
作者:hahaFck   
最近在学 react,遇到一个问题请教一下,假如组件都是用 function 定义的,如果页面的结构是这样的:

我想在 toolbar 中的一个 button 点击事件中获取 Grid 控件的值,该用什么方法实现呢。
按照以往非组件化的思路应该是直接获取到这个 grid 对象,在调用对应的 getValue 方法就可以了。
虽然组件支持传递回调函数,在 grid 内部,state 变化时调用回调函数,但是这样的话回调函数就要在 page 里面从 layout 传到 grid ,感觉这种思路太不符合直觉了,因为 layout 和 some 组件根本就不应改有 callback 的 prop ,如果 some 下面有 5 个组件,那就要传递 5 个 callback ,太可怕了吧,并且多加一个组件就要去修改 some 的代码也是不对的。
后段 coder 最近在学前端,没用 react 做过项目,不知道遇到这种情况改怎么解决,有什么好的方法或者 lib 能够优雅的解决这个问题么。
Histo   
可以把 Grid 的 state 提升到 Page 中,或者直接在 Page 上包裹一个 Context.Provider ,用 context 管理状态
leaflxh   
另一种自用的办法是在 Toolbar 这个组件里的 useEffect([])里,挂一个事件监听:
//定义通信格式
interface IToolbarDataChangeEvent{
msg:string
}
//处理函数
const handleDatachange = (detail: IToolbarDataChangeEvent) = > {console.log(detail.msg)}
//注册事件
document.addEventListener("toolar::handleDataChange", handleDataChange)
//本组件卸载时的清除
return () => {document.removeEventListener("toolar::handleDataChange", handleDataChange)}
然后 Grid 更新数据的时候发一个事件过去:
const event = new CustomEvent[I]("toolar::handleDataChange", {detail: {msg: "a msg from grid"}});
document.dispatchEvent(event)
leaflxh   
来自野路子前端,不确定是否是推荐的做法(
zbinlin   
这种情况一般用 Context
shizhibuyu2023   
要学会用 gpt
我的话会直接用状态管理库
Provide 给 Grid 控件去赋值,属于狗屎代码
kneo   
能处理的方法很多。比如把多个 callback 封装成一个,使用 children 传递子控件,使用 context/provider 。但是我想说,才 5 个 callback 有什么可怕的?搞后端没这么脆弱。
lqm   
直接上状态库,zustand ,早晚会上的
huijiewei   
用 context 跨级别传
hahaFck
OP
  
@Histo
@zbinlin
如果用 context 的话,useContext 的代码就要硬编码到 grid 组件中,这样这个组件也不通用了吧,放到另外页面的 context 里面又要重新写一份。
您需要登录后才可以回帖 登录 | 立即注册

返回顶部