动态加载 <script> 和 CSS Reactjs 的最佳实践是什么答案

【问题标题】：What is the best practice for dynamically loading <script> and CSS Reactjs动态加载 <script> 和 CSS Reactjs 的最佳实践是什么
【发布时间】：2016-11-12 00:20:59
【问题描述】：

早安！来自印度尼西亚，我需要为不同的组件动态加载不同的 CSS 和 Javascript，例如我有幻灯片组件，然后我需要加载与之相关的 js 和 css 文件，并且我有表单组件，我需要加载相关的 css 和 jss文件。

在 react.js 中执行此操作的正确方法或最佳实践是什么？谢谢。

【问题讨论】：

你可以看看 webpack、system.js、jspm.io... 这些都是模块加载器，应该都可以使用 reactjs。

标签： javascript reactjs react-jsx redux-form react-redux-form

【解决方案1】：

我的回答应该被带上一粒盐，因为它是对你提出的一个广泛问题的固执己见的回答。

IMO，一种在需要时动态加载 css+javascript+html 位的良好且现代的方法是与 WebComponents 一起使用 react。看看WebComponents section on react's website，密切关注使用WebComponents可能出现的问题。

这是一个起始示例：WebComponent + React Example

【讨论】：

【解决方案2】：

如果您在构建应用时谈到需要它们，您可以使用名为 webpack 的构建工具来实现。它会查看您的代码并将所有必需的文件捆绑到一个新文件夹中。您只需在组件 js 中要求/导入相关文件。

here's 给你一个很好的教程。

如果您说的是在加载幻灯片组件时动态加载样式和脚本，您可以简单地包含一个

<script> and or <link>

在您的渲染方法中。

请注意，react 组件不应该直接改变 DOM。因此，如果你有一个想要“组件化”的 js 幻灯片小部件，你可能会遇到问题。

【讨论】：

很高兴能提供帮助。不要忘记选择最佳答案并投票：)