Как ввести реквизит индекса и стиля, переданный функции строки, используя React-Window

#typescript #react-window

#typescript #react-window

Вопрос:

Я пытаюсь ввести следующие два параметра, переданные функции строки.

 //https://github.com/bvaughn/react-window

import * as React from "react";
import styled from "styled-components";
import { FixedSizeList as List } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";

const StyledSection = styled.section`
  width: 100vw;
  height: 100vh;
  background: #C0C0C0;
`;

const Row = ({ index, style }) => (
  <div className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
    Row {index}
  </div>
);

const Scroller = () => {
  return (
    <StyledSection>
      <AutoSizer>
        {({ height, width }) => {
          return (
            <List height={height} width={width} itemSize={20} itemCount={300}>
              {Row}
            </List>
          );
        }}
      </AutoSizer>
    </StyledSection>
  );
};

export { Scroller };
 

Итак, следующий фрагмент кода typescript выводит параметры индекса и стиля как тип any . Я попытался встроить тип для индекса как число, но затем компилятор сообщает, что индекс не определен.

    const Row = ({ index, style }) => (
      <div className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
        Row {index}
      </div>
    );
 

Есть идеи, как предоставить типы этим двум параметрам. у react-window есть свой собственный общий файл.ts. Вот рабочий codesandbox — https://codesandbox.io/s/infinite-scroller-52b7d?file=/src/Scroller.tsx

Ответ №1:

Это то, что вы ищете?

 import { CSSProperties } from 'react';

const Row = ({ index, style }: { index: number; style: CSSProperties; }) => (
  <div className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
    Row {index}
  </div>
);
 

Вы все равно можете добавить ввод текста при использовании деструктурирования объекта. Также вы можете использовать свою среду разработки, чтобы найти тип style , используя goto declaration первый style из style={style} . (ctrl-b или ctrl-q в jetbrain IDE, не знает для VSCode, извините).

Комментарии:

1. да, да, да. Спасибо. Я пытался ввести внутри объекта destructured props, поэтому внутри { index: number, style} . еще раз спасибо и за CSSProperties и подсказку по инструментам. Merci!