nuomiphp
正在加载…
请使用更现代的浏览器并启用 JavaScript 以获得最佳浏览体验。
加载论坛时出错,请强制刷新页面重试。
react 这种组件化设计框架,怎么能拿到子组件的值呢?
Histo
可以把 Grid 的 state 提升到 Page 中,或者直接在 Page 上包裹一个 Context.Provider ,用 context 管理状态
hahaFck
Histo
zbinlin
如果用 context 的话,useContext 的代码就要硬编码到 grid 组件中,这样这个组件也不通用了吧,放到另外页面的 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<IToolbarDataChangeEvent>("toolar::handleDataChange", {detail: {msg: "a msg from grid"}});
document.dispatchEvent(event)
leaflxh
来自野路子前端,不确定是否是推荐的做法(
ericgui
leaflxh
#2 不错,这个思路也挺好
gogozs
leaflxh
发送事件就是一对多了,楼主的例子更符合一对一的情况
zbinlin
这种情况一般用 Context
shizhibuyu2023
要学会用 gpt
我的话会直接用状态管理库
Provide 给 Grid 控件去赋值,属于狗屎代码
kneo
能处理的方法很多。比如把多个 callback 封装成一个,使用 children 传递子控件,使用 context/provider 。但是我想说,才 5 个 callback 有什么可怕的?搞后端没这么脆弱。
lqm
直接上状态库,zustand ,早晚会上的
huijiewei
用 context 跨级别传
Leviathann
hahaFck
这是 explicity 的体现,不然你怎么知道这个组件有一个可以被捕获的事件组件和一个 context 的配合一起使用也是一个比较常见的 pattern
wisetc
这是 react 特别的地方,你说的对 react 组件是基于一般属性和回调属性的单向数据流,所有的子组件都可以由父组件自上而下赋值参数来控制,组件间也是提倡组合大于继承,不同的组件间传参共享数据是通过公共父类组件居中调度,这一点在某些清新下确实会不太方便,但是也在一定程度上避免了组件间的相互修改,而是给它什么就是什么显得很确定。若是例子中的情形也是可以通过设定属性的,react 是可以透传属性的,跨组件传递数据流确实会有一些不太方便就是,大应用可以用集中的数据管理作为公共的数据源获得其中的状态,然后转化为普通组件的属性
orzorzorzorz
是的,照文档看且不考虑状态管理,你只能一层层往上传。context 自己用还行,人多了就很乱。
歪个楼。19 年那会我自己要开个项目,rva 选了半天,最后选了 a 。从结果看,只能说 angular 这种填空式开发是真的是在三年后等你,不太会有像 op 主楼里这样的心智负担。
ymcz852
orzorzorzorz
那么,请问 angular 是如何处理呢🤔
Ghrhrrv146
使用状态管理库最简单
wu67
使用状态库,
虽然项目早期时可能你会觉得烦琐,但是越往后越多需要共享状态的业务
ChefIsAwesome
这就是典型的组件一对多的模式,要靠一个中间人来完成传递。这个中间人肯定是这几个组件的上一级。前面几层楼推荐的 context ,状态管理库,都是这么个中间人。你定义 customEvent ,在 windows 上 dispatch ,那也叫中间人,也能解决你的问题。
你随便写就好了,不要想着非得符合“react”的路子才行。
ztcaoll222
context 、状态库、或者 Grid 直接写 localStorage(笑
darkengine
状态上移,我会把所有数据和点击的响应函数都放在 Page 里,Toolbar 只负责通知 Page 某个 Button 被点击了,Layout, Some, Grid 只负责根据数据展示。
maolon
状态上移+1 同时使用 children 的方法摊平组件
<Page>
<Toolbar/>
<Layout>
<some>
<Grid {...props}>
</some>
<Laout>
</Page>
orzorzorzorz
ymcz852
我只知道实例化调用。不过实际上就算在 react 里,我也没碰见过层级那么深的组件。真有 op 这个场景,那是要考虑组件抽象是不是出问题了。
nzbin
ymcz852
在 angular 中最简单的方式就是通过 service 共享状态,本质就是 DI + rxjs
ebushicao
最简单的方法就是把状态提升到需要的最上层,不过这样在组件层次过多的情况下既不利于维护,也会存在性能问题,尤其是中间传递某些组件不需要用到这个状态。
然后就是用 Context API ,因为不推荐所以详情建议去看 React 官方文档。
然后是使用状态管理库,把这种多个组件使用的状态交由状态管理库管理,算是最合适的处理了,喜欢稳定的就是 redux 和 mobx ,喜欢更现代的就看看 recoil ,zustand ,jotai
下一页 »