Question

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

回到我的问题，请在下面找到我迄今为止尝试过的代码。由于我没有使用nodeJS，我不能使用“require”或“include”这些下拉列表中的主要角色，但幸运的是他们为“react-virtualized-select”提供了UMD javascript文件，所以我最终将这些脚本包含在内HTML正文，但是当我运行代码时，我在控制台中收到错误

embedded：20 Uncaught 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>

Answer 1

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

例如，如果我想使用VirtualScroll中的react-virtualized.min.js，我需要写<ReactVirtualized.VirtualScroll ..，因为文件指出exports.ReactVirtualized。如果我没有得到与你相同的错误。

编辑：

这不是最佳解决方案，但它是一种解决方案。由于'package'导出为react-virtualized-select，并且您不允许使用javascript名称缩写，您可以按如下方式“导入”它：

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

并像你最初那样使用它：

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

使用没有节点后端的React Virtualized Select

1 个答案: