使用状态管理库最简单

使用状态库，
虽然项目早期时可能你会觉得烦琐，但是越往后越多需要共享状态的业务

这就是典型的组件一对多的模式，要靠一个中间人来完成传递。这个中间人肯定是这几个组件的上一级。前面几层楼推荐的 context ，状态管理库，都是这么个中间人。你定义 customEvent ，在 windows 上 dispatch ，那也叫中间人，也能解决你的问题。
你随便写就好了，不要想着非得符合“react”的路子才行。

context 、状态库、或者 Grid 直接写 localStorage(笑

@hahaFck 这是 explicity 的体现，不然你怎么知道这个组件有一个可以被捕获的事件

组件和一个 context 的配合一起使用也是一个比较常见的 pattern

状态上移，我会把所有数据和点击的响应函数都放在 Page 里，Toolbar 只负责通知 Page 某个 Button 被点击了，Layout, Some, Grid 只负责根据数据展示。

状态上移+1 同时使用 children 的方法摊平组件
<Page>
    <Toolbar/>
    <Layout>
      <some>
         <Grid {...props}>
      </some>
    <Laout>
</Page>

@orzorzorzorz 那么，请问 angular 是如何处理呢🤔

最简单的方法就是把状态提升到需要的最上层，不过这样在组件层次过多的情况下既不利于维护，也会存在性能问题，尤其是中间传递某些组件不需要用到这个状态。
然后就是用 Context API ，因为不推荐所以详情建议去看 React 官方文档。
然后是使用状态管理库，把这种多个组件使用的状态交由状态管理库管理，算是最合适的处理了，喜欢稳定的就是 redux 和 mobx ，喜欢更现代的就看看 recoil ，zustand ，jotai

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