Question

我们在PHP上使用CMS构建，它使用自定义模块。

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

现在我想为这些模块创建一个JavaScript模板系统，可以在每个模块上呈现React appliaction。

例如，我创建了反应包。我还有我的单页模块，它生成模块html的模块，其中应该呈现反应。我希望我的react bundle能够在这个id上呈现而不是：

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

ID mod-123416-name是自动创建的，因此我想在客户端使用一些代码（例如RenderReactOn（“mod-123516-name”）来在每个模块上使用此id呈现一个反应束。< / p>

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

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

这是否可能与反应有关，或在这种情况下最佳做法是什么。也许我应该采取Knockout.js而不是反应？

感谢您的建议贝

Answer 1

这根本不是问题，我这样做：

将您的组件（React Apps）捆绑在一个文件中：

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>

在动态id上渲染反应（React JS）

1 个答案: