代码之家 › 专栏 › 技术社区 › Orbitum

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

redux webpack reactjs jquery javascript

-1

Orbitum · 技术社区 · 6 年前

例如,我有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)

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

谢谢您!

1 回复 | 直到 6 年前

P Varga 6 年前

在reactapp中,可以创建一个全局函数来呈现它:

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

然后,在“legacy”js中:

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

N.B.未提及 React 或 ReactDOM 这里需要。

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

4 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Luckkks · 过渡色工作不正常

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

5 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

5 月前

noblerare · Vite错误-未定义导出(SSR)

5 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

5 月前