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

[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 能够优雅的解决这个问题么。

[ericgui]

@leaflxh #2 不错，这个思路也挺好

[ericgui]

1 楼和 2 楼都可以

1 楼的又可以分为：context 和 state management library

[wcf]

有这个 API useImperativeHandle 相当于 vue 的 ref

[orzorzorzorz]

@ymcz852 我只知道实例化调用。
不过实际上就算在 react 里，我也没碰见过层级那么深的组件。真有 op 这个场景，那是要考虑组件抽象是不是出问题了。

[LandCruiser]

React 的官方文档看一遍吧，两种方法，一种是传递一个函数到 grid 组件里去，另一种是把状态提到 page 组件。

[gogozs]

@leaflxh 发送事件就是一对多了，楼主的例子更符合一对一的情况

[Baymaxbowen]

1 、通过一层层的回调
2 、通过状态管理库或者 context
3 、通过自定义事件，在 toolbar 发送事件，在 Grid 监听事件（ https://mebtte.com/split_react_state_by_event ）

[lanlanye]

推荐做法是把状态提到上层，毕竟你要在上层用，说明这个状态应该属于上层。
如果跨多层或者分散导致不方便一层层传递的话可以使用 Provider 之类的东西，但这不改变你把状态提升到上层的事实。

[aliyun2017]

如果这值不用即时渲染到页面上，就直接写一个缓存对象；要即时渲染就上状态管理

[jguo]

如果 toolbar 需要用到 grid 里的值，那这个值大概率不该属于 grid

[mouyase]

首先是上面各位大佬说过的问题。

这个 state 如果 grid 组件并不需要为其生产数据，而只是消费数据的话，那可以把 state 提升到上层去生产他的组件里面。
可以用 Provider+useContext 的形式跨级传入，也可以用 props 逐级传入。当然你用一些全局的状态管理也不是不行。

如果这个值不涉及到渲染，也可以把这个值定义为 ref ，然后给 grid 组件使用 forwardRef 高阶函数包裹，同时使用 useImperativeHandle 把数值/函数暴露给父级，父级通过 ref.current.数值的形式获取。

最主要的还是看这个数值的作用和来源是什么。

[ljpCN]

大家只说了解决方案，但这个需求是否是合理的还得看具体场景，很多时候是设计问题，这个状态只需要 grid 自持就行。

[zbowen66]

jutai, 跨组件的 useState

[xitler]

状态提升，入门教程不是都有吗

[nzbin]

@ymcz852 在 angular 中最简单的方式就是通过 service 共享状态，本质就是 DI + rxjs

[xwwsxp]

https://easy-peasy.dev/ 如果会 Vue ，直接使用这个组件库

[douxc]

如果只是父子的话，父组件用 useReducer ，把 dispatch 传给子组件

[douxc]

@douxc #37 像题目这种跨多级的，在最近一个公共祖先节点用 context 维护状态，然后向下分发

[GeekGao]

全局状态用 Jotai 库管理即可

[myl0204]

很多人说到了，状态提升。

“我想在 toolbar 中的一个 button 点击事件中获取 Grid 控件的值”

可以了解下受控组件的概念： https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components