如何解决在onRenderCell / onClick / ...函数上有React / Typescript限制吗?
我正在尝试在自己的工作台上运行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,没有打字错误。
让我知道您是否有任何疑问!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。