React Native SectionList：什么是正确的 TypeScript 类型答案

【问题标题】：React Native SectionList: What are the correct TypeScript typesReact Native SectionList：什么是正确的 TypeScript 类型
【发布时间】：2019-05-10 12:34:20
【问题描述】：

我正在使用 TypeScript 构建一个 React Native 应用程序。我正在尝试使用SectionList。我遵循了文档，这是我的代码：

  renderSectionHeader = ({ section: { title } }: { section: { title: string } }) => (
    <ListItem title={title} />
  );

  render() {
    const { sections } = this.props;
    return (
      <SafeAreaView style={styles.container}>
        <SectionList
          keyExtractor={this.keyExtractor}
          sections={[
            {title: 'Title1', data: ['item1', 'item2']},
            {title: 'Title2', data: ['item3', 'item4']},
            {title: 'Title3', data: ['item5', 'item6']},
          ]}
          renderItem={this.renderItem}
          renderSectionHeader={this.renderSectionHeader}
        />
      </SafeAreaView>
    );
  }

但renderSectionHeader={this.renderSectionHeader} 行抛出以下 TSLint 错误：

[ts]
Type '({ section: { title } }: { section: { title: string; }; }) => Element' is not assignable to type '(info: { section: SectionListData<any>; }) => ReactElement<any> | null'.
  Types of parameters '__0' and 'info' are incompatible.
    Type '{ section: SectionListData<any>; }' is not assignable to type '{ section: { title: string; }; }'.
      Types of property 'section' are incompatible.
        Type 'SectionListData<any>' is not assignable to type '{ title: string; }'.
          Property 'title' is missing in type 'SectionListData<any>'. [2322]

SectionList 的类型被破坏了吗？还是例子错了？还是我做错了什么？

【问题讨论】：

标签： typescript react-native typescript-typings typescript-types react-native-sectionlist

【解决方案1】：

我是 TypeScript 的新手，所以这个问题可能不是最好的，但你可以在这里查看 React Native 类型：React Native Types github

现在你可以在第 4243 行看到这个：

renderSectionHeader?: (info: { section: SectionListData<ItemT> }) => React.ReactElement<any> | null;

这意味着 renderSectionHeader 属性需要一个带有一个参数的函数，该参数是一个具有SectionListData<ItemT> 类型的section 字段的对象。

要消除您发布的错误，您可以执行以下操作：

  renderSectionHeader = ({ section: { title } }: { section: { title: string } }): React.ReactElement<any>=> (<ListItem title={title} />)

  render() {
    const { sections } = this.props;
    return (
      <SafeAreaView style={styles.container}>
        <SectionList
          keyExtractor={this.keyExtractor}
          sections={[
            {title: 'Title1', data: ['item1', 'item2']},
            {title: 'Title2', data: ['item3', 'item4']},
            {title: 'Title3', data: ['item5', 'item6']},
          ]}
          renderItem={this.renderItem}
          renderSectionHeader={({section}: {section: SectionListData<string[]>}) => this.renderSectionHeader(section)}
        />
      </SafeAreaView>
    );
  }

希望这是正确的，并会帮助你。

编辑：如果您不想在 props 期间提供类型，则通过此 renderHeader 方法将不会出错：

renderSectionHeader = ({ section }: {section: SectionListData<string[]>}): ReactElement<any> | null => (<Text>{section.title}</Text>)

【讨论】：

【解决方案2】：

interface Data {
...
}

const MySectionList = SectionList as SectionList<Data>;

<MySectionList
...
/>

为我工作

【讨论】：

您的数据看起来如何，

【解决方案3】：

这是SectionListData声明，所以你只需要把title属性去掉，换成key，TSLint Error就会消失。

export interface SectionBase<ItemT> {
    data: ReadonlyArray<ItemT>;

    key?: string;

    renderItem?: SectionListRenderItem<ItemT>;

    ItemSeparatorComponent?: React.ComponentType<any> | null;

    keyExtractor?: (item: ItemT, index: number) => string;
}

export interface SectionListData<ItemT> extends SectionBase<ItemT> {
    [key: string]: any;
}

enter image description here

【讨论】：

什么是 ItemT，我从哪里导入它？？

【解决方案4】：

如果你知道你正在使用什么类型，并且只是为了避免你可以做的警告：

sections={sections as any[]}

【讨论】：

【解决方案5】：

以下对我有用

interface Group {
  title: string;
  data: readonly Item[]; // Important to add readonly
}

private scroll: RefObject<SectionList<Item>>;

public renderItem = ({ item }: ListRenderItemInfo<Item>): ReactElement => (
  <ReactItem />
);

public renderSectionHeader = ({
  section,
}: {
  section: SectionListData<Item>;
 }): ReactElement | null => (
  <ReactSectionHeader />
)

const groupedItemToRender = [
  { title: 'title1', data: [ItemObject, ItemObject] },
  { title: 'title2', data: [ItemObject, ItemObject] },
];

<SectionList
  ref={this.scroll}
  sections={groupedItemToRender}
  renderItem={this.renderItem}
  renderSectionHeader={this.renderSectionHeader}
/>

【讨论】：

你没有在任何地方使用那个界面

【解决方案6】：

[
  { title: "Title1", data: ["item1", "item2"] },
  { title: "Title2", data: ["item3", "item4"] },
  { title: "Title3", data: ["item5", "item6"] },
]

首先您需要定义 Section Type 和日期项 Type。

我将在这里使用一个接口来定义它们。


type Item = string

interface Section {
  title: string;
  data: Item[]
}

now you need to define your `SectionList` `renderItem` function

const renderItem: SectionListRenderItem<Item, Section> = ({ item }) => {
  // make sure you return some sort of a component here.
};

【讨论】：