从旧版JS渲染React应用的解决方案

Question

For example I have ReactApp which is packed via 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')
)

And I would like to call it from legacy JS function, which is available in global scope, something like:

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

The problem is that:

1) I need to render multiple ReactApp's using drawReactApp() (render widgets).

2) I can't find solution for rendering ReactApp using legacy JS code, because I can't include React JS scripts, only bundle file (this is limitation).

3) I can render ReactApp on "hardcoded" HTML ID element (for example: "#root-element"), but can't make ID dynamic (only legacy JS can know on which element ReactApp should be rendered)

Is there any advice or solutions on this?

Thank you!

Answer 1

In your «ReactApp», you could create a global function to render it:

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

Then, in "legacy" JS:

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

NB No reference to React or ReactDOM needed here.