Communicating with ReactJS components in different Meteor packages - meteor

Question

I am building a web application using ReactJS and Meteor. I am using the method of structuring my application where components are split into separate Meteor packages.
For example. I have a component which renders a tabular menu (using the semantic-ui tab module) and initializes the tabs, then each tab is its own React component.
How would I be able to access the DOM in one component in another component.
Example:
Component = React.createClass({
componentDidMount() {
$('.menu .item').tab({
onVisible: () => {
// I need to call a function here, which is defined in OtherComponent,
// but this jQuery won't run in OtherComponent
}
})
},
render() {
return (
<div className="ui tabular menu">
<div className="active item" data-tab="tab-1">Tab 1</div>
<div className="item" data-tab="tab-2">Tab 2</div>
</div>
/* more code */
<div className="ui active tab" data-tab="tab-1"></div>
<div className="ui tab" data-tab="tab-2"></div>
)
}
}
OtherComponentInDifferentPackage = React.createClass({
componentDiMount() {
$('.menu .item').tab({
onVisible: () => {
// this won't work....
}
})
}
})

Answer 1

You'd need to have a parent component that holds state and can pass that as props to both components. In react you can also pass functions as props, in this case you could pass a function from the parent to the children that will trigger a state change in the parent. To change the state of parent you would call this.props.toggleVisible() from the child.
// Parent Component
toggleVisible() {
this.setState({
visible: !this.state.visible
});
}
getInitialState() {
return {
visible: false
}
}
render() {
return (
<div>
<Component
visible={this.state.visible}
toggleVisible={this.toggleVisible}
/>
<OtherComponentInDifferentPackage
visible={this.state.visible}
toggleVisible={this.toggleVisible}
/>
</div>
);
}
// Child Component
componentWillReceiveProps(nextProps) {
if (nextProps.visible !== this.props.visible) {
// do something
}
}