从遗留js中呈现react应用程序的解决方案

例如,我有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)我找不到使用遗留JS代码渲染ReaAcpp的解决方案,因为我不能包含JS脚本,只有捆绑文件(这是限制)。

3)我可以在“硬编码”HTML ID元素(例如:“μ根元素”)上呈现ReAcpApp,但不能使ID动态化(只有遗留JS可以知道应该呈现哪个元素ReaTeCpp)

对此有什么建议或解决办法吗?

谢谢您!