-1

React Virtualized Selectを使用して、選択ドロップダウンに約 100 万件のレコードを表示したいと考えていました。フラスコとangularjsに基づいてプロジェクトを作成しました。angularjs を介してそのようなドロップダウンのリソースを見つけることができなかったため、この選択ドロップダウンを取得するために、react.js と angular.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>

4

1 に答える 1

3

私はコードをテストできないので、これについてあなたを助けるのは本当に難しい. しかし、それはおそらく 'package' を指定していないためですVirtualizedSelect。試してみてください<Foo.VirtualizedSelect ... .js ファイルで Foo を見つけることができます。exports.Foo

たとえば from を使用VirtualScrollしたい場合は、ファイルの状態react-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 に答える