Question

我是打字稿新手，需要有关编写事件处理程序类型的指南。我在组件中使用了材质ui手风琴，并从容器中调用了处理程序。因此，我需要在组件界面中指定handleChange的类型。

内部组件：

<Accordion
        square
        expanded={expanded === 'panel1'}
        onChange={handleChange('panel1')}
>Content</Accordion>

内部容器：

   const handleChange = (panelName: string) => (event, isExpanded: boolean) =>  {
    setExpanded(isExpanded ? panelName : false)
  }

（JSX属性）AccordionProps.onChange？：（（事件：React.ChangeEvent <{}>，展开：布尔值）=> void）|未定义

错误：类型'void'不能分配给类型'（（event：ChangeEvent <{}>，展开：boolean）=> void）|未定义”。

问题：应该为handleChange指定什么类型？

interface Props {
  expanded: string
  handleChange: ???
}

Answer 1

您的handleChange是一个函数，该函数返回一个返回void的函数（它只是设置组件状态）。

无论如何，我想Props.handleChange实际上是Props.onChange（如果它是手风琴的道具）。无论如何，我猜应该是(event: React.ChangeEvent<{}>, expanded: boolean) => void这个props签名（正如编译器告诉你的那样）。

是这样的：

interface Props {
    expanded: string;
    onChange(event: React.ChangeEvent<{}>, expanded: boolean): void;
    // or
    onChange: (event: React.ChangeEvent<{}>, expanded: boolean) => void;
}

我希望这是您所需要的。 ?

Answer 2

在将界面类型设置如下后，我可以正常工作

interface Props {
  expanded: string | boolean
  handleChange: (
    panel: string,
  ) => (event: React.ChangeEvent<unknown>, expanded: boolean) => void
}

容器调用：

const handleChange = (panel: string) => (
    event: React.ChangeEvent<unknown>,
    isExpanded: boolean,
  ) => {
    setExpanded(isExpanded ? panel : false)
  }

由于使用了咖喱函数，我感到困惑，但是我不确定，使用 Type-'unknown'是最佳做法。

React Typescript：MuiAccordion OnChange事件处理程序类型错误

2 个答案: