用于反应引导 DropDown 的 onSelect 事件处理程序打字稿类型

Question

我将 React 与 typescript 和 react-bootstrap 一起使用来创建下拉列表：

ipc__handleSelect = (eventKey: any, event: any) => {
}

render() {

    return (
        <Dropdown>
            <Dropdown.Toggle>Text</Dropdown.Toggle>
            <Dropdown.Menu>
                <Dropdown.Item
                    key         = 'key1'
                    eventKey    = 'key1'
                    onSelect    = {this.ipc__handleSelect}
                >Item</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    );
}

帮助识别数据类型

1. event: any - 我应该写什么类型？

2. eventKey: any - 我应该写什么类型？

当我写eventKey: string（因为键是字符串）时，我得到错误：

Type '(eventKey: string, event: any) => void' 不可分配给 输入“选择回调”。参数类型“eventKey”和 'eventKey' 不兼容。 键入'字符串 | null' 不可分配给类型 'string'。 类型 'null' 不能分配给类型 'string'。

为什么null会出现在那里？

Answer 1

如果您查看 react-bootstrap 库代码，您将看到下拉菜单。 Item 有一个 SelectCallback 类型的 onSelect，SelectCallback 是这样的：

export type SelectCallback = (
  eventKey: string | null,
  e: React.SyntheticEvent<unknown>,
) => void;

由于您指定您的处理程序只接受字符串类型，并且下拉项 onSelect 将字符串 | null 提供给 eventKey，因此您收到无法映射的错误。