传递给 React 组件的匿名函数的 Typescript 接口

Question

我正在学习将 Typescript 与 React 功能组件（Bootstrap 模态组件）一起使用，并且对在使用匿名函数时应如何为组件正确定义 Typescript 接口感到困惑。

在下面的这个例子中，TheModal 组件被传入一个布尔值 show 和一个匿名函数 handleClose.

export function Foo(): JSX.Element {
    const [ showModal, setShowModal ] = useState(false);

    return (
        <MyContainer>
            <TheModal show={showModal} handleClose={ () => setShowModal(!showModal) } />
        </MyContainer>
    )
}

下面是TheModal组件和Typescript接口定义IModal。虽然代码运行起来了，但我认为 any 不应该用于 handleClose.

interface IModal {
    show: boolean;
    handleClose: any;  // <======== I believe we should use something better than `any`
}

function TheModal({show, handleClose}: IModal): JSX.Element {
    return (
        <Modal show={show} onHide={handleClose}>
            <Modal.Header closeButton>
                <Modal.Title>Hello World</Modal.Title>
            </Modal.Header>
            <Modal.Body>
            </Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={handleClose}>Cancel</Button>
            </Modal.Footer>
        </Modal>
    )
}

在 IModal 中为 handleClose 定义类型的正确方法是什么？

Answer 1

我认为输入处理程序的最佳方式是使用 React 内置类型：


import React from 'react';

interface IModal {
    show: boolean;
    handleClose: React.MouseEventHandler<HTMLButtonElement>;
}

传递给 React 组件的匿名函数的 Typescript 接口

Typescript Interface for Annoymous Function passed into React Component

javascript

interface

typescript

reactjs

react-functional-component