在 Rails 应用程序上使用外部 React 组件答案

【问题标题】：Using an external React component on Rails application在 Rails 应用程序上使用外部 React 组件
【发布时间】：2017-02-01 17:50:32
【问题描述】：

我正在尝试在使用react-railsgem 的现有Rails 应用程序上使用rc-sliderReact 组件，并且它已经在应用程序中构建了一些其他可以正常工作的组件。

基于this blog post，我已经能够遵循它的前三个步骤，我找到了它的缩小版和浏览器就绪版本here，将文件添加到建议的路径并在@上需要它987654330@ 推荐，但即使看到在浏览器上呈现的Sprockets 生成的应用程序 javascript 文件中的代码，我也看不到或使用它将根据步骤 4 提供的假定全局变量。

在组件的examples page 中，它使用const Slider = require('rc-slider'); 语句来获得可用的。我已经尝试过了，但没有运气，因为它抛出：Uncaught ReferenceError: require is not defined。当我尝试使用README 的部分方法时，也会发生同样的情况：import Slider, { Range } from 'rc-slider';。我已经从加载其他 React 组件的现有 JS 以及浏览器的 Dev Tools Console 窗口中进行了尝试。

我是否使用了错误的方法来解决问题，或者可能在这里遗漏/监督任何概念或基础知识？

【问题讨论】：

标签： javascript ruby-on-rails ruby reactjs

【解决方案1】：

如果你想使用 Sprockets，你可以从 unpkg 获得一个 rc-slider 的预编译版本：

https://unpkg.com/rc-slider@6.0.0/dist/rc-slider.js

查看源代码，我看到它将库导出为rc-slider：

因此您可以以window["rc-slider"] 的身份访问它并从那里使用它，例如：

var RCSlider = window["rc-slider"]

var container = document.getElementById("container")

ReactDOM.render(
  <div>
    <RCSlider />
    <RCSlider.Range />
  </div>,
  container
);

jsfiddle

这样，如果您将rc-slider.js 放入资产管道，您就可以在您的javascript 中使用RCSlider。

【讨论】：