React/Typescript 对 onRenderCell/onClick/... 功能的限制？

Question

我正在尝试运行 Fluent UI Basic List example on my own bench。此处显示示例：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

Answer 1

所以，从 documentation:

onRenderCell

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

Method to call when trying to render an 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 未定义的可能性。

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

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

React/Typescript 对 onRenderCell/onClick/... 功能的限制？

React/Typescript restrictions on onRenderCell/onClick/... functions?

reactjs

fluent-ui