-1

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

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

嵌入式：20 未捕获的 ReferenceError：未定义 VirtualizedSelect

有人可以告诉我我是否以正确的方式实施反应，或者我对 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>

4

1 回答 1

3

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

例如，如果我想使用VirtualScrollfromreact-virtualized.min.js我需要写<ReactVirtualized.VirtualScroll ..，因为文件状态exports.ReactVirtualized. 如果我没有得到与您相同的错误。

编辑：

这不是最好的解决方案，但它是一个解决方案。由于“包”被导出为react-virtualized-select并且您不允许在 javascript 名称中使用减号，因此您可以按如下方式“导入”它：

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

并像一开始一样使用它：

<VirtualizedSelect options={options} ... />
于 2016-09-05T21:47:47.360 回答