在onRenderCell / onClick / ...函数上有React / Typescript限制吗？

编程问答 2022-08-14

问题描述

我正在尝试在自己的工作台上运行Fluent UI Basic List示例。此处显示示例：https://developer.microsoft.com/en-us/fluentui#/controls/web/list。我将整个示例代码复制到应用程序中，并用自己的数组替换了示例数据。但是我遇到以下错误：

Type '(item: IExampleItem,index: number | undefined) => JSX.Element' is not assignable to type 
'(item?: { key: number; name: string; } | undefined,index?: number | undefined,isScrolling?: 
boolean | undefined) => ReactNode'.`
Types of parameters 'item' and 'item' are incompatible.
Type '{ key: number; name: string; } | undefined' is not assignable to type 'IExampleItem'.
  Type 'undefined' is not assignable to type 'IExampleItem'.  TS2322

83 | 
84 | 
85 |       <List items={data} onRenderCell={onRenderCell} />
   |                          ^
86 | 
87 |   );
88 | };

是因为这是Typescript文件吗？我应该禁用某些东西来更改编译并防止此类错误吗？

更改后，我的代码如下：https://codepen.io/vipperdev/pen/QWNdeJe

解决方法

因此，从documentation：

onRenderCell

(item?: T,index?: number,isScrolling?: boolean) => React.ReactNode

尝试渲染项目时调用的方法。

是否注意到item旁边的问号？它表示项目是可选的，因此它可能存在或可能不存在，对吧？您必须根据参数的类型在函数中进行处理。例如，

const onRenderCell = (
  item: IExampleItem | undefined,index: number | undefined
): JSX.Element => {
  return (
    <div className={classNames.itemCell} data-is-focusable={true}>
      {item?.name}
    </div>
  );
};

我在上面做了两项更改：

  • item: IExampleItem现在为item: IExampleItem | undefined。
  • {item?.name}而非{item.name}来解决item不确定的可能性。

这里是working codesandbox，没有打字错误。

让我知道您是否有任何疑问！

fluent-uireactjsreactjsreactjsreactjs