How can I access the component instance inside the tab?

[Wandering-Li]

Hi,everyone. I'm a newcomer in React. In my development using rc-dock, the main issue is that it's hard for me to access the component instance inside a tab. For example I want to call the component's method or change its state from outside (outside the tab and dock layout.)

take the demo "controlled-layout" for example.

let tab0 = {
  title: 'Controlled Layout',
  content: (
    <div>
      <p>When you use <b>layout</b> instead of <b>defaultLayout</b> on &lt;DockLayout&gt;</p>
      <p>DockLayout will work as a controlled component</p>
    </div>
  )
};

in this demo we define the content in tab0 in this way.

let's say I import a custom component and add it to tab0, it becames:

import {CustomComponent} from "./select";
//other code
let tab0 = {
  title: 'Controlled Layout',
  content: (
    <div>
      <p>When you use <b>layout</b> instead of <b>defaultLayout</b> on &lt;DockLayout&gt;</p>
      <p>DockLayout will work as a controlled component</p>
      <CustomComponent></CustomComponent>
    </div>

  )
};

what should I do if I want to get the instance "CustomComponent" that in tab0?

in the demo, the" render(){return()}" part only have<DockLayout >

I tried to use ref but don't know how to use it with rc-dock.