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

Question

我正在尝试使用 rc-slider使用 react-rails 的现有 Rails 应用程序上的 React 组件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';。我已经从加载其他 React 组件的现有 JS 以及浏览器的 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 放入 Assets 管道中，您就可以在您的 javascript 中使用 RCSlider。