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

时间:2016-11-12 00:20:59

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

早上好!来自印度尼西亚,我需要为不同的组件动态加载不同的CSS和Javascript,例如我有幻灯片组件然后我需要加载与它相关的js和css文件,我有表单组件,我需要加载相关的CSS和jss文件也是如此。

&#xA;&#xA;

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

&#xA;

2 个答案:

答案 0 :(得分:0)

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

here's一个很好的教程。

如果你在谈论在加载幻灯片组件时动态加载样式和脚本,你可以简单地包含一个

<script> and or <link> 

在你的渲染方法中。

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

答案 1 :(得分:0)

我的答案应该用一点点解读,因为这是对你所提出的广泛问题的一个自以为是的答案。

IMO,一种在需要时动态加载css + javascript + html位的好的现代方法是使用WebComponents旁边的反应。请查看WebComponents section on react's website并密切关注使用WebComponents时可能出现的问题。

以下是一个开始示例:WebComponent + React Example