javascript - 从纯 JavaScript 添加 React 组件

Question

背景

我没有太多 React 经验。我正在使用 React 和 Redux 编写一个可嵌入的小部件。该小部件可以在同一网页上多次包含，每个都有自己的设置。

问题

我只想包含一次 React 应用程序 JS。因此，如果小部件在单个页面上被多次包含，它会第一次加载应用程序 JS，然后对于后续的每个包含，它都会检查 JS 是否已包含，如果已包含，则不会再次包含。

到目前为止，我只能初始化第一个小部件实例，这是在加载 React 应用程序 JS 时发生的。我想我想为每个后续小部件进行一个轻量级(普通 JavaScript)调用，以将带有该小部件设置的 React 组件渲染到 DOM。

我似乎不知道如何进行简单的 JavaScript 调用来使 React 渲染一个新组件。

它看起来像什么

<script type="text/javascript" src="http://example.com/widget/1"></script>
<script type="text/javascript" src="http://example.com/widget/2"></script>

第一个脚本标签使用主 React 应用程序 JS 将脚本标签添加到页面。这是一个很大的文件，约 800 KB。它包含所有 React/Redux 库包含内容和我的 React 组件定义。它渲染一个 React 组件并向其传递 ID 1。

第二个脚本标签确实不应该为了在页面上创建新组件而再次包含该文件。我只是希望它在 DOM 中渲染一个新的 React 组件并向其传递 ID 2。

Answer 1

要渲染 React 元素，只需调用:

ReactDOM.render(react_element, dom_element);

其中 dom_element 是您希望 react 元素在页面中放置的位置。 Relevant docs .

如果您想防止多次包含 JavaScript，只需编写脚本，使其首先检查是否已运行，如果已运行则立即退出。

当然，您的小部件还需要加载 React 脚本并等待它们准备好后再继续。你可以这样做:

if (!window.MyWidgetPromise) {
  window.MyWidgetPromise = script([
    'https://unpkg.com/react@15/dist/react.js',
    'https://unpkg.com/react-dom@15/dist/react-dom.js'       
  ]).then(function() {
    return React.createClass(...);
  })
}
window.MyWidgetPromise.then(function(widget) {
  ReactDOM.render(widget, TARGET_ELEMENT);
})

假设您正在使用this promise-based script loader .

或者，您可以让此小部件的第一次包含呈现页面中所需的小部件的所有实例，并让后续包含不执行任何操作，如下所示:

if (!window.MyWidgetPromise) {
  window.MyWidgetPromise = script([
    'https://unpkg.com/react@15/dist/react.js',
    'https://unpkg.com/react-dom@15/dist/react-dom.js'       
  }).then(function() {
    var widget = React.createClass(...);
    document.querySelector('my-widget').forEach(function(element) {
      ReactDOM.render(widget, element);
    })
  })
}

不过，如果将其包装在文档就绪处理程序中，效果会更好，这样您就可以确保在 querySelector 运行之前所有受影响的元素都存在于 DOM 中。