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

Question

我正在尝试在使用rc-slider React的现有Rails应用上使用react-rails gem组件，并且它已经有一些其他组件是在应用程序内构建的，工作正常。

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

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

我是否使用错误的方法解决问题，或者可能缺少/监督任何概念或基础知识？

Answer 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放在资产管道中，则可以在javascripts中使用RCSlider。