Get component reference inside jsx?

Question

React

There is this code:

var App = React.createClass({
  render: function () {
    return (
      <div>
        <Menu />
        <div className="main-wrapper">
          <WorkArea />
        </div>
      </div>
    );
  }
});

var WorkArea = React.createClass({
  render: function () {
    return (
      <div className="row">
        <div className="col-md-3 left-column"><TreeView path="/" startload={true} parent={false} level={1}/></div>
        <div className="col-md-9 right-column"><Tabs /></div>
      </div>
    );
  }
});

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

I won’t give the codes of all the components that are used here, and those that are used even deeper too, it makes no sense .. The
question is, after I generated the Tabs, how can I get a link to it inside the WorkArea to make further modifications ? That is, a crutch with which this can be done is thought out right away, but I want a normal solution.
In the case of the TreeView, for example (since it is multi-level), I pass parent when it is, and inside I perform the necessary operations, for example, when the TreeViewItem component opens inside, I pass the parent parameter there and operate with it as I need. But in the case of Tabs, the situation is reversed, you need to get a reference to the component that was created, and not from which it was created.
In general, as a result, I want to do something like this from anywhere in the application:

window.WorkAreaTabs.AddTab({
  title: this.props.item.name,
  content: "test"
});

Answer 1

After explanations in the comments, we decided on what is needed. Through refs, you can get a link to the component
Access to the component through this.tabs