在动态 ids 上渲染 reactdom (React JS)

Question

我们有一个基于 PHP 的 CMS，它使用自定义 mod 规则。

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

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

例如，我创建了我的反应包。我还有一个带有 module 的单页，它生成带有 module html 的 modules，其中应该呈现反应。我希望我的反应包在这个 id 上呈现而不是：

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

ID mod-123416-name 是自动创建的，所以我想在客户端使用一些代码，例如 RenderReactOn("mod-123516-name") 在每个 mod使用此 ID 的规则。

因此我可以在客户端的 n 个不同 mod 规则上呈现相同的反应代码：

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

React 可以做到这一点吗，或者在这种情况下的最佳做法是什么。也许我应该服用 Knockout.js 而不是反应？

谢谢指教托尼

Answer 1

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

将您的组件（React 应用程序）捆绑在一个文件中：

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>

在动态 ids 上渲染 reactdom (React JS)

Render reactdom on dynamic ids (React JS)

client

render

dynamic

reactjs