我必須在Blueprint.js

使用打字稿與多選（實驗室）組件

我忙着Blueprint.js和多選組件，我已瞭解仍然在積極發展實驗：http://blueprintjs.com/docs/#labs.multiselect 我必須在Blueprint.js

我有從來沒有使用過的打字稿及更說明

// 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>();

所以我的問題是，是否有可能在JavaScript中使用這個組件，而無需使用打字稿？

我的反應成分未呈現，目前，並出現以下錯誤：

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

組件被定義爲：

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> 
    ); 
    } 
}

來源

2017-08-09 turkeyman84

是的，你可以使用該組件與JS。只是省略泛型類型參數：

const UserMultiSelect = MultiSelect.ofType(); 

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

我承認這有點不直觀，所以它可能值得文檔更新。

來源

2017-08-09 23:44:23

謝謝，這個作品！ – turkeyman84

我必須在Blueprint.js

回答

相關問題