在动态ID（React JS）上呈现reactdom

我们有一个基于PHP的CMS，它使用自定义模块。在动态ID（React JS）上呈现reactdom

每个模块都呈现为HTML文档，并且可以包含（挂钩）在每个页面上，并且在html中具有自己的动态aund唯一ID。

现在我想为这个模块创建一个JavaScript模板系统，其中React应用程序可以在每个模块上呈现。

例如，我创建了我的反应包。我也有我的单个页面与模块生成模块与模块html应该呈现的反应。我想我的反应束来呈现这个ID代替：

ReactDOM.render(<App />, document.getElementById('root'));

的ID MOD-123416-名称自动创建的，所以我想例如RenderReactOn一些代码（“MOD-123516名“）在客户端使用此ID在每个模块上呈现一个反应包。

这样我就可以呈现相同的n个不同的模块在客户端反应代码：

RenderReactOn("mod-123516-name"); 
RenderReactOn("mod-252141-name"); 
RenderReactOn("mod-453467-name");

这是可能的反应，或者是什么在这种情况下的最佳实践。也许我应该采取Knockout.js而不是反应？

感谢咨询托尼

来源

2017-08-19 bukso

这不是在所有问题，我会做这种方式：

捆绑您的组件（应用程序做出反应），在一个单一的文件：

import React from 'react'; 
import { render } from 'ReactDOM' 
import ReactAppOne from 'ReactAppOne' 
import ReactAppTwo from 'ReactAppTwo' 

const Apps = { 
    ReactAppOne, 
    ReactAppTwo, 
} 

function renderAppIn(elementId, appId) { 
    const APP = Apps[appId] 
    if (!APP) return; 

    render(<APP />, document.getElementById(id)) 
} 

// simply assign that function to the window 
window.renderAppIn = renderAppIn;

在您呈现的html中：

<div id="some-app-123"></div> 
    <div id="some-app-xyz"></div> 

    <script src="/js/bundle.js"></script> 
    <!-- Render your Render Stamements --> 
    <script> 
     renderAppIn('some-app-123', 'ReactAppOne') 
     renderAppIn('some-app-123', 'ReactAppTwo') 
     // render the same app in another div 
     renderAppIn('some-other-div', 'ReactAppTwo') 
    </script>

来源

2017-08-19 11:55:08 webdeb

在动态ID（React JS）上呈现reactdom

回答

相关问题