Dois-je utiliser avec le tapuscrit MultiSelect (laboratoires) composant Blueprint.js

Question

Je suis occupé à expérimenter avec Blueprint.js et le composant MultiSelect, que j'undestand est encore en développement actif: http://blueprintjs.com/docs/#labs.multiselect

Je jamais utilisé tapuscrit et il est indiqué que

// Select<T> is a generic component to work with your data types. 
// In TypeScript, you must first obtain a non-generic reference: 
const FilmSelect = Select.ofType<Film>(); 

ma question est, est-il possible d'utiliser ce composant Javascript sans utiliser tapuscrit?

Mon réaction composant n'est pas le rendu à l'heure actuelle, avec l'erreur suivante:

multiSelect.js?64c9:37 Uncaught TypeError: Cannot read property 'map' of undefined 

Le composant est défini comme:

import React from 'react'; 
import Flexbox from 'flexbox-react'; 
import {Dialog, Button, Intent} from '@blueprintjs/core'; 
import {MultiSelect} from '@blueprintjs/labs'; 
import {inject, observer} from 'mobx-react'; 
import Avatar from 'react-avatar'; 

@inject('AccountRelationshipsStore', 'AccountUsersStore', 'ToastStore')@observer 
export default class AccountRelationshipsNewRelationship extends React.Component { 
constructor(props) { 
    super(props); 

    this.state = ({isSubmitting: false}); 
} 

renderUser(handleClick, isActive, user) { 
    return (
     <span>{user.fullName}</span> 
    ); 
} 

renderTag(user) { 
    return user.fullName; 
} 

handleItemSelect(item) { 
    console.log(item); 
} 

render() { 
    return (
     <Dialog isOpen={this.props.dialogOpen} onClose={() => this.props.toggleDialog()} canOutsideClickClose={true} title={I18n.t('js.add_a_new_user_relationship', { 
      type: this.props.AccountRelationshipsStore.activeRelationship.name.toLowerCase(), 
      name: this.props.AccountRelationshipsStore.activeUser.fullName 
     })} className='side-dialog' inline={true}> 
      <form> 
       <div className='pt-dialog-body'> 
        <Flexbox flexDirection='column' flexGrow={1}> 
         <Flexbox flexDirection='row' justifyContent='center' flexGrow={1}> 
          <Avatar src={this.props.AccountRelationshipsStore.activeUser.imageFileName} size={100} round={true} className=''/> 
         </Flexbox> 
         <Flexbox flexDirection='row' justifyContent='center' flexGrow={1} marginTop='10px'> 
          <p className='pt-text-muted'>{this.props.AccountRelationshipsStore.activeUser.fullName}</p> 
         </Flexbox> 
         <Flexbox> 
          <MultiSelect items={this.props.AccountUsersStore.users} itemRenderer={this.renderUser.bind(this)} onItemSelect={this.handleItemSelect.bind(this)} tagRenderer={this.renderTag.bind(this)}/> 
         </Flexbox> 
        </Flexbox> 
       </div> 
       <div className='pt-dialog-footer pt-dialog-footer-bottom'> 
        <div className='pt-dialog-footer-actions'> 
         <Button text={I18n.t('js.cancel')} onClick={() => this.props.toggleDialog()}/> 
         <Button intent={Intent.PRIMARY} type='submit' text={I18n.t('js.set_relationships')} loading={this.state.isSubmitting}/> 
        </div> 
       </div> 
      </form> 
     </Dialog> 
    ); 
    } 
} 

Answer 1

Oui, vous pouvez utiliser le composant avec JS. Il suffit de supprimer le type générique param:

const UserMultiSelect = MultiSelect.ofType(); 

<UserMultiSelect items={this.props.AccountUsersStore.users} ... /> 

Je reconnais c'est un peu unintuitive, il mérite probablement une mise à jour de la documentation.