exposing function to child

MyComponent.jsx

class MyComponent extends React.Component{
  constructor(props, context) {
    super(props, context);
    
    this.editorControls = null;
    
    this.focusFunction = (objectToFocus) => {
      if(!this.editorControls) {
        return;
      }
      
      this.editorControls.focus(objectToFocus);
    };
  }
  
  componentDidMount() {
    // create EditorControls here
    this.editorControls = ...;
    
    this.refs.editorControlsContainer.add(this.editorControls); 
  }

  componentWillUnmount() {
    this.refs.editorControlsContainer.remove(this.editorControls);
    
    // clean up other stuff for this.editorControls
    
    this.editorControls = null;
  }
  
  render() {
    return (<group>
      <SomeChild/>
      <SomeOtherChildThatMayLikeFocus focus={this.focusFunction}/>
      <object3D ref="editorControlsContainer"/>
    </group>);
  }
}

SomeOtherChildThatMayLikeFocus.jsx

class SomeOtherChildThatMayLikeFocus extends React.Component {
  static propTypes = {
    focus: React.PropTypes.func.isRequired,
  };
  
  componentDidMount() {
    setTimeout(() => {
      this.props.focus(this.refs.mesh);
      // focus mesh in 5 seconds
    }, 5000);
  }
  
  render() {
    return (<mesh ref="mesh"/>);
  }
}