Question

例如，我有通过Webpack打包的ReactApp：

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）我需要使用drawReactApp()（渲染小部件）渲染多个ReactApp。

2）我找不到使用旧版JS代码渲染ReactApp的解决方案，因为我不能包括React JS脚本，只能包含捆绑文件（这是限制）。

3）我可以在“硬编码的” HTML ID元素（例如：“＃root-element”）上呈现ReactApp，但不能使ID动态化（只有旧版JS才能知道应在哪个元素上呈现ReactApp）< / p>

对此有任何建议或解决方案吗？

谢谢！

Answer 1

在«ReactApp»中，您可以创建一个全局函数来呈现它：

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

然后，在“旧版” JS中：

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

N.B。此处无需引用React或ReactDOM。

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

1 个答案: