Wrapping a legacy control in a React component

wraplegacycalendarpicker.jsx

class CalendarPicker extends React.Component {

  constructor() {
    var randomId = CustomFramework.guid(); //get a GUID from the framework that will be the ID for the legacy calendar control
    this.state = {controlId: randomId, value: null}; //we'll set value later based on legacy control events (see below)
  }

  render() {
    //On initial render, put an empty div with a unique ID on the DOM.
    //The control will be inserted inside this container.
    //This will only happen once since componentShouldUpdate() will always return false.
    var containerId = 'containerFor' + this.state.controlId;
    return <div id={containerId}/>;
  }
  
  componentDidMount() {
    //Here, overwrite the contents of containerId with the custom legacy control.
    //This will vary a lot by how your legacy UI framework works.
    //For sake of discussion, assume we have a custom JS function that renders a legacy control inside a specified element (we do, more or less).
    //Ours I guess is a little like a partial view.
    var containerId = 'containerFor' + this.state.controlId;
    
    CustomFramework.renderControl({controlType: 'CalendarPicker', insideElementWithId: containerId, controlId: this.state.controlId});
    
    //could also set a default value here that came in from the props
    
    //Our legacy controls fire global functions that are based on the name of the control. Whatever your naming convention, if your controls fire events, something like this should work.
    var changeEventFunctionName = this.state.controlId + 'ValueChanged';
    
    window[changeEventFunctionName] = this.onLegacyCalendarPickerUpdate; //call event on React control when legacy control event is fired
  }
  
  onLegacyCalendarPickerUpdate() {
    //we've got a custom function that wraps the jQuery that gets the control's value from the DOM.
    var legacyCalendarPickerValue = CustomFramework.getValueFromControl({controlType: 'CalendarPicker', controlId: this.state.controlId});
    
    this.props.onValueChanged(legacyCalendarPickerValue); //notify any React components waiting for this value.
  }
  
  componentShouldUpdate(nextProps, nextState) {
    return false; //after the first render, the control's view should be managed by legacy framework functions.
  }
}