Блог

Я пытаюсь запустить пример 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

Итак, из документации:

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 быть неопределенным.

Вот рабочий codesandbox без ошибки typescript.

Дайте мне знать, если у вас возникнут какие-либо вопросы!