在没有节点后端的情况下使用 React Virtualized Select

Question

我想使用 React Virtualized Select 在 select 下拉列表中显示近 100 万条记录。我已经创建了基于 flask 和 angularjs 的项目。我无法通过 angularjs 找到此类下拉菜单的任何资源，因此我决定使用 react.js 和 angular.js 来获得此 select 下拉菜单。

关于我的问题，请在下面找到我到目前为止尝试过的代码。因为我没有使用 nodeJS，所以我不能使用 "require" 或 "include"，它们对这些下拉菜单起着重要作用，但幸运的是，他们为 "react-virtualized-select" 提供了 UMD javascript 文件，所以我将这些脚本包含在 HTML 主体的末尾，但是当我运行代码时，我在控制台中收到错误消息

embedded:20 Uncaught ReferenceError: VirtualizedSelect is not defined

有人可以告诉我我是否以正确的方式实施反应，或者我对 UMD 文件的理解有误吗？提前致谢。

更新：我创建了一个 JS Fiddle 突出显示了这个问题，我还根据 SO 的评论对代码进行了一些更改。

JSFiddle Demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-  select/1.0.0-beta14/react-select.min.css">
<link rel="stylesheet" href="./VirtualizedSelect.css">
</head>
<body>
<div id='root'/>
<Application/>
<script type="text/javascript" src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-with-addons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/classnames/index.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-input-autosize/dist/react-input-autosize.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-select/1.0.0-beta14/react-select.js"></script>
<script type="text/javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-virtualized/7.0.0/react-virtualized.min.js"></script>

<script type="text/javascript" src="./react-virtualized-select.js"></script>//UMD File from GITHUB

<script type="text/babel">
  class Application extends React.Component {
    constructor (props) {
      super(props)
      this.state = {}
    }

    render () {
      const options = [
          { label: 'one', value: 'One' },
          { label: 'two', value: 'Two' },
          { label: 'three', value: 'Three' },
          { label: 'four', value: 'Four' },
          { label: 'five', value: 'Five' },
          { label: 'six', value: 'Six', disabled: true }
        // And so on...
      ]

      return (
        <VirtualizedSelect options={options} onChange={(selectValue) => this.setState({ selectValue })} value={this.state.selectValue}/>
      )
    }
  }
  ReactDOM.render(
    <Application/>,
    document.getElementById('root')
  );
</script>

Answer 1

我无法测试代码，因此很难在这方面帮助您。但这可能是因为您没有为 VirtualizedSelect 指定 'package'。尝试 <Foo.VirtualizedSelect ... 你可以在 .js 文件中找到 Foo，它看起来像 exports.Foo

例如，如果我想使用 react-virtualized.min.js 中的 VirtualScroll，我需要写 <ReactVirtualized.VirtualScroll ..，因为文件状态为 exports.ReactVirtualized。如果我不这样做，我会得到和你一样的错误。

编辑：

这不是最好的解决方案，但它是一个解决方案。由于 'package' 导出为 react-virtualized-select 并且不允许在 javascript 名称中使用负号，因此您可以 "import" 如下所示：

const VirtualizedSelect = window["react-virtualized-select"].default;

并像最初一样使用它：

<VirtualizedSelect options={options} ... />

在没有节点后端的情况下使用 React Virtualized Select

Using React Virtualized Select without node backend

javascript

reactjs

umd

react-select

react-virtualized