React组件参数传递

Question

前端新手，想做个单页应用，部分概念如图所示，黄色部分EditorToolbar是可单选的工具栏，单选不同的按钮，蓝色部分有不同的panel可以展示不同的内容。

抽取了部分关键的组件，关系如下图所示

最终期望效果就是在MainTool维护当前选中的功能按钮，然后显示不同的面板，例如场景面板（ScenePanel），角色面板（CharacterPanel）

刚了解到react是单向的，请教如何在MainTools中维护的选中按钮的状态如何可以传递到EditorAllPanel来显示不同的面板？

感觉如果使用context是个非常啰嗦的机制

请问该如何完成这种传递？

Answer 1

同react新人。
这个涉及到的状态管理的设计问题。（或者称作状态提升，如果不明白这个概念，要先去官网看一下）
两个独立的组件通常是不能直接传参的。（我不确定，因为我没用过同级直接传参，context暂不了解）

react中传参方式：
1、状态提升。在你这个例子中，可以把EditorToolBar和EditorAllPanel的状态保存在editor里，通过props传入子组件（父组件根据EditorToolBar状态不同，传入不同的状态给EditorAllPanel去渲染）
2、用redux和react-redux统一管理。这个相当于这个状态管理中心，组件需要哪些state就传入哪些，需要哪些action（修改state的方法）就传入哪些。

但是！！！如果按你问题描述所说的，左边只是三个单选按钮进行不同面板的切换，那为什么要用state来处理呢。。。杀鸡用牛刀啊。
react-router、二级菜单都可以处理啊。
看你的需求，我觉得router就够了。

注：的确react传参是单向（props），所以就需要状态提升/用redux统一管理（相当于提升到最顶级）。
redux有一个好处是普通状态提升没有的：不管组件怎么嵌套，嵌套多少层，我只要写了传给你，你就一定能收到。（怎么传到的，我不用管）而在普通状态提升中，只能通过相邻的父子组件，一层一层往里传，不好维护，又麻烦。

如果有其他问题，欢迎讨论。