Javascript 从另一个组件触发画布上的图形

我目前正在尝试学习ReactJS，并希望参与一个小项目，以确保我已经学会了基本原理

我的ReactJS应用程序的结构如下所示：

<App>
   <MainCanvas/>
   <CommandPanel>
      <CommandButton/>
      <CommandButton/>
      <CommandButton/>
   </CommandPanel>
</App>

，但是，所有代码都在一个Canvas元素下，考虑到我正在尝试做的事情，我认为我不应该这样编码


我是否通过
CommandPanel
将
App
中的回调函数向下传递给每个使用onClick调用的
CommandButton
（将其添加到查找对象以便动态生成这些按钮）？如果是这样，我如何让
App
在
MainCanvas
上触发一个函数？这似乎也不是这样做的“正确”方式。我的理解是，父母需要给孩子传递道具和回电。它们不应该是子组件中的触发方法

有人能告诉我该怎么做吗

谢谢

编辑：一直在考虑这个问题。也许是对我的申请进行重组？将
命令面板
移动到
主画布
。这样，我就可以在
MainCanvas
中设置函数，并通过道具将它们传递给下面的
CommandButton
元素。也许这是一个更好的方法？如果是这样做的话，我如何将回调函数的名称设置到lookup对象中，这样我就只能将一个prop传递给按钮并从该对象中查找回调函数的名称