Решение для рендеринга приложения React из устаревшего JS

Question

Например, у меня есть ReactApp, который упакован через Webpack:

import React from 'react'
import ReactDom from 'react-dom';
import {Provider} from 'react-redux'
import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'

import rootReducer from '../reducers/index';

let store = createStore(
    rootReducer,
    {},
    composeWithDevTools(
        applyMiddleware(thunk)
    )
)

ReactDom.render(
    <Provider store={store}>
        <div>
            TEST IF WORKS
        </div>
    </Provider>,
    document.getElementById('root-element')
)

И я хотел бы вызвать его из устаревшей функции JS, которая доступна в глобальной области видимости, что-то вроде:

<script type="text/javascript">
function drawReactApp(el, initialData) {
    // Render ReactApp on dynamic HTML element ID
}
</script>

Проблема в том, что:

1) Мне нужно отрендерить несколько ReactApp, используя drawReactApp() (виджеты рендеринга).

2) Я не могу найти решение для рендерингаReactApp использует устаревший код JS, потому что я не могу включить скрипты React JS, только файл пакета (это ограничение).

3) Я могу отобразить ReactApp на «жестко закодированном» элементе HTML ID (например: "#root-element "), но не может сделать ID динамическим (только устаревший JS может знать, какой элемент должен отображаться в ReactApp)

Есть ли какие-либо советы или решения по этому поводу?

Спасибо!

Answer 1

В вашем «ReactApp» вы можете создать глобальную функцию для ее рендеринга:

window.drawThisReactApp = (into, initialData) => {
  ReactDOM.render(<Provider ...><ReactApp {...initialData} /></Provider>, into);
}

Затем в «устаревшем» JS:

<script>
  window.drawThisReactApp(document.getElementById(...), {...});
</script>

NB Нетссылка на React или ReactDOM необходима здесь.