0

我正在尝试在我自己的工作台上运行 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 | };

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

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

4

1 回答 1

1

因此，从文档中：

onRenderCell

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

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

注意旁边的问号item？它表示 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未定义的可能性。

这是一个没有打字稿错误的工作代码框。

如果您有任何问题，请告诉我！

于 2020-08-27T05:01:25.603 回答