Question

背景

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

问题

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

到目前为止，我只能初始化第一个小部件实例，这个实例是在加载React app JS时发生的。我想我想为每个后续的小部件调用一个轻量级（vanilla 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传递给它。

第二个脚本标记实际上不应该再次包含该文件，以便在页面上创建新组件。我只是希望它在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中。

从纯JavaScript添加React组件

1 个答案: