Reactjs React：从另一个组件与fabric.js画布实例交互

我正在尝试创建一个与fabricjs画布交互的UI。左侧是一个组件，显示可添加到画布的项目库。中间将是Fabjjs画布，右边是一个组件，它列出了画布上所有类似于PopyPops层面板的添加项。p> 我想知道如何在左侧ItemsList.js的组件中拥有onClick事件，访问在其父组件中声明的fabricjs画布实例

这是主要的组成部分

MainComponent.js

在ItemsList.js中的某个地方，对于列表中的每个项目，都有一个按钮将项目的图像添加到画布中

为ItemsList组件中的特定项单击此按钮后，我希望将单击的项的图像添加到树上的组件中声明的画布中。例如

<MainComponent> <-- This is where I declare the fabric canvas.
  <ItemsList>
     <Item/>  <-- This is where the button is clicked.
  </ItemsList>
</MainComponent>

如何从内部访问画布实例

如果它与答案相关，同时，我还需要右边的组件来显示添加到画布中的内容

---

谢谢

我用以下方法做到了这一点

创建画布

<canvas ref="c" id = "c"></canvas>

---

我已经设法做到这一点与以下

创建画布

<canvas ref="c" id = "c"></canvas>

<canvas ref="c" id = "c"></canvas>

 canvas = document.getElementById("c").fabric;