2

我正忙于尝试 Blueprint.js 和 MultiSelect 组件，我不知道它仍在积极开发中：http: //blueprintjs.com/docs/#labs.multiselect

我从未使用过 TypeScript，据说

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

所以我的问题是，是否可以在不使用 TypeScript 的情况下在 Javascript 中使用这个组件？

我的 react 组件目前没有渲染，出现以下错误：

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

1 回答 1

5

是的，您可以将组件与 JS 一起使用。只需省略泛型类型参数：

const UserMultiSelect = MultiSelect.ofType();

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

我承认这有点不直观，所以它可能值得更新文档。

于 2017-08-09T23:44:23.057 回答