在 Reagent 中使用 React 组件

Question

我正在尝试使用 http://react-components.com (eg. react-youtube) in Reagent based application, but probably my naive approach is not the right one. I tried to install NPM packages with lein-npm module, include script in html page and use them via reagent/adapt-react-class as in this SO 问题中的组件。但是除了这个样本我没有成功。

通常我会收到 "require/import/module is not defined" 或 "Youtube is undefined" 之类的错误（通过 (def yt-test [] (r/adapt-react-class js/Youtube))。我对需要做什么感到困惑。我读了一些关于 webpack/browserify 的内容，看到 cljsjs 包 - 是否需要这些包才能使其正常工作？

Answer 1

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

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

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

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

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

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

从 ClojureScript 访问 React 组件

Answer 2

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

大体概念与@scttnlsn建议的相同：将所有npm包捆绑在一个外部JS文件中，并通过全局window对象公开它们。

在 Reagent 中使用 React 组件

using React components in Reagent

clojurescript

reagent