Cómo conecté componentes React a JS externo: la historia de un desarrollador

Debido a mi tarea de trabajo actual tengo un caso—llamar a un modal creado como componente React desde el Ribbon de SharePoint. En pocas palabras, el ribbon de SharePoint es una estructura que contiene botones y funciones js vinculadas a ellos. Cuando presionas el botón, la función js vinculada a él llama... espero que entiendas :). Y empecé a googlear: cómo interactuar con un módulo react desde js externo, cómo cambiar el estado de react desde js externo, forzar el re-render de un componente react desde js puro y demás... Entonces, el problema principal es: no puedes vincular una función de componente react al botón del ribbon porque se esconde en lo profundo del bundle js de webpack. Además, necesito cambiar el estado del Módulo React porque quiero re-renderizar el componente cuando hago clic en el botón. Entonces, hice el fiddle y parece que funciona correctamente—https://jsfiddle.net/o6ujb5g2/. No es el ribbon de SharePoint, pero es casi lo mismo. La idea es adjuntar la función del modal react al objeto global window. Este objeto existe desde casi cualquier lugar.

Pasos:

Creé una función stub en js puro para window.func que quiero sobrescribir desde el componente (es por seguridad, si pasa algún problema con el render del componente)
En el componente inicializo una func con lógica de negocio, que cambia el estado del componente
En componentDidMount sobrescribo el window.func global a module.func
¡PROFIT!!!

Listados de Código Fuente:

HTML

<script>
window.toggleModal = function(isOpened) {
  console.log(`[x] Loading... Passed value: ${isOpened}`);
}
</script>


<input type="button" onclick="js:window.toggleModal(true);" value="click me"/>
<div id="app" var1="test"></div>

React Module

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isModalOpened: false,
      items: [
        { text: Learn JavaScript, done: false },
        { text: Learn React, done: false },
        { text: Play around in JSFiddle, done: true },
        { text: Build something awesome, done: true }
      ]
    }
  }

  componentDidMount = () => {
    window.toggleModal = this.toggleModal;
  }

  toggleModal = (isOpened) => {
    this.setState({
      ...this.state, isModalOpened: isOpened
    });
  }

  render() {
    return (
      <div>
        <h2>Todos:</h2>
        <ol>
        {this.state.items.map(item => (
          <li key={item.id}>
            <label>
              <input type=checkbox disabled readOnly checked={item.done} />
              <span className={item.done ? done : }>{item.text}</span>
            </label>
          </li>
        ))}
        </ol>
        {this.state.isModalOpened && (
        <React.Fragment>
          <p>modal opened!</p>
          <input type=button onClick={() => this.toggleModal(false)} value=close />
        </React.Fragment>)}
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector(#app))

Índice

Pasos:
Listados de Código Fuente:

Disponible para colaboración por contrato

Estoy disponible para colaborar por contrato. Si tiene una idea de proyecto interesante, reserve una llamada por Calendly.

Agenda una llamada de 30 min