Utilisation de React Virtualized Select sans backend de noeud

-1

Je voulais utiliser le React Virtualized Select pour afficher près d'un million d'enregistrements dans une liste déroulante. J'ai déjà créé le projet basé sur flask et angularjs. Je n'ai pas trouvé de ressources pour une telle liste déroulante à travers angularjs, donc je suis venu à la décision d'utiliser react.js avec angular.js pour obtenir cette liste déroulante.Utilisation de React Virtualized Select sans backend de noeud

Pour en venir à ma question, veuillez trouver ci-dessous le code que j'ai essayé jusqu'à maintenant. Comme je n'utilise pas nodeJS je ne peux pas utiliser "require" ou "include" qui jouent un rôle majeur pour ces listes déroulantes, mais heureusement ils ont fourni des fichiers javascript UMD pour "reac-virtualized-select", donc j'ai inclus ces scripts à la fin du corps HTML, mais quand je lance le code que je reçois l'erreur dans la console comme

embedded:20 Uncaught ReferenceError: VirtualizedSelect is not defined

quelqu'un pourrait-il me dire si je suis mise en œuvre de réagir de la manière appropriée ou est-il quelque chose que je suis comprendre mal sur les fichiers UMD ? Merci d'avance. Mise à jour: J'ai créé un JS Fiddle soulignant le problème, j'ai également apporté quelques modifications au code sur la base des commentaires de 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/[email protected]/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>

Source

2016-09-05 Naren Murali

Il est vraiment difficile de vous aider à ce que je ne peux pas tester le code. Mais c'est probablement parce que vous ne spécifiez pas le 'package' pour VirtualizedSelect. Essayez <Foo.VirtualizedSelect ... Vous pouvez trouver Foo dans le fichier .js, il ressemble à exports.Foo

Si je veux par exemple utiliser VirtualScroll de react-virtualized.min.js je besoin d'écrire <ReactVirtualized.VirtualScroll .. puisque les états de fichiers exports.ReactVirtualized. Si je ne reçois pas la même erreur que vous avez.

Edit:

Ce n'est pas la meilleure solution, mais il est une solution. Étant donné que le « paquet » est exporté sous forme react-virtualized-select et vous n'êtes pas autorisé en javascript points négatifs noms que vous pouvez « importer » comme suit:

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

et l'utiliser comme vous l'avez fait au premier:

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

Source

2016-09-05 21:47:47 Petter

Salut, Merci beaucoup pour la suggestion, j'ai essayé ce que vous avez dit, mais maintenant je reçois l'erreur "reaction-with-addons.min.js: 16 Violation Invariable Uncaught: erreur Minified React # 130, visitez http: // facebook. github.io/react/docs/error-decoder.html?invariant=130&args[...undefined&args[]=%20Check%20the%20render%20method%20of%20%60Application%60.pour le message complet ou utilisez le message non-minifié environnement de développement pour les erreurs complètes et annonce avertissements utiles traditionnels. " J'ai également créé un JS FIddle avec le code complet pour votre référence, https://jsfiddle.net/Kai_Draord/q8om2be6/1/ –

pourriez-vous s'il vous plaît dites-moi ce que je fais mal? –

[https://jsfiddle.net/0p2j0wc6/](https://jsfiddle.net/0p2j0wc6/) voici un jsfiddle avec le code de travail. – Petter

Utilisation de React Virtualized Select sans backend de noeud

Répondre

Questions connexes