无TypeScript的React项目中如何实现Blueprintjs Select2非泛型引用

在JavaScript环境下，你不需要像TypeScript那样指定泛型类型参数，直接调用Select2.ofType()（不带任何类型参数）就能获取到可直接使用的非泛型组件引用。

TypeScript里的ofType<T>是用来做类型约束的，而JavaScript本身没有静态类型检查，所以这个方法在JS中不需要传入任何类型参数，直接调用就可以生成适配你的数据结构的组件实例。

以下是对应你提供的TypeScript示例的JavaScript版本代码：

import { Button } from "@blueprintjs/core";
import { MenuItem2 } from "@blueprintjs/popover2";
import { Select2 } from "@blueprintjs/select";
import * as Films from "./films";

// 直接调用ofType()即可得到非泛型的Select2组件引用
const FilmSelect = Select2.ofType();

ReactDOM.render(
    <FilmSelect
        items={Films.items}
        itemPredicate={Films.itemPredicate}
        itemRenderer={Films.itemRenderer}
        noResults={<MenuItem2 disabled={true} text="No results." roleStructure="listoption" />}
        onItemSelect={(selectedItem) => {
            // 这里处理选中逻辑即可
            console.log(selectedItem);
        }}
    >
        {/* 子元素作为弹出框的触发目标，在这里渲染选中值 */}
        <Button text={Films.items[0].title} rightIcon="double-caret-vertical" />
    </FilmSelect>,
    document.querySelector("#root")
);

注意事项 #

• 你之前尝试的Select2.ofType<PropTypes.array>()是错误的，因为PropTypes是React的类型校验工具，和Blueprint的泛型类型参数不是一回事，而且在JS里根本不需要传这类参数。
• 只要你的items、itemPredicate、itemRenderer等属性和你的数据结构匹配，组件就能正常工作，JS会自动处理数据的类型，不需要额外的类型声明。

内容的提问来源于stack exchange，提问作者Damien