在Reagent中使用React组件

Question

我试图在基于Reagent的应用程序中使用http://react-components.com中的组件(例如react-youtube),但可能我的天真方法不正确.我尝试使用lein-npm模块安装NPM软件包,在html页面中包含脚本,并reagent/adapt-react-class在此 SO问题中使用它们.但是除了这个样本我没有成功.

通常我会收到错误,例如"未定义require/import/module"或"Youtube未定义"(通过拥有(def yt-test [] (r/adapt-react-class js/Youtube)).我对需要做什么感到困惑.我读了一些关于webpack/browserify的内容,看到cljsjs包 - 是那些必需的为了使这个工作？

Answer 1

我写了一篇关于如何使用webpack实现这一目标的分步指南: blob.tomerweller.com/reagent-import-react-components-from-npm

一般概念与@scttnlsn建议相同:将所有npm包捆绑在外部JS文件中,并通过全局window对象公开它们.

Answer 2

这些组件被打包为 CommonJS 模块。从 ClojureScript 访问 CommonJS 模块的一种方法是将它们捆绑到一个可以包含在 ClojureScript 构建中的 JavaScript 文件中。

您需要创建一个 JavaScript 入口点文件，该文件需要各种 NPM 依赖项并将它们公开给 ClojureScript（例如，通过将它们设置为 on window）。创建一个文件（我们称之为index.js），其中包含：

window.YouTube = require('react-youtube');

然后使用像Browserify这样的工具来捆绑您的入口点文件及其所需的所有依赖项：

npm install -g browserify
browserify index.js --standalone window > bundle.js

包含bundle.js在您的 ClojureScript 构建中，您将能够通过 ClojureScript 访问 React 组件js/YouTube