React Native SectionList:正确的TypeScript类型是什么

Question

我正在使用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的类型是否已损坏？或者这个例子错了？还是我做错了什么？

Answer 1

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

首先需要定义Type&日期项CCD_ 5。

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

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.
};

Answer 2

这个对我有用：

import type { SectionListData } from 'react-native';
interface Section {
title?: string;
data: readonly any[];
}
type SectionHeader = (info: { section: SectionListData<YOUR_ARRAY_TYPE, Section> }) => React.ReactElement;
const renderSectionHeader: SectionHeader = ({ section: { title } }) => {
return YOUR_HEADER_COMPONENT;
};

Answer 3

我是TypeScript的新手，所以这个问题可能不是最好的，但你可以在这里查看React Native types:React NativeTypes github

在第4243行中，您可以看到以下内容：

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

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

为了消除你发布的错误，你可以这样做：

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>
);
}

希望这是正确的，对你有帮助。

编辑：如果你不想在道具传递过程中提供类型，这个renderHeader方法将是无错误的：

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

Answer 4

interface Data {
...
}
const MySectionList = SectionList as SectionList<Data>;
<MySectionList
...
/>

为我工作

Answer 5

这是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;
}

在此处输入图像描述

Answer 6

以下适用于我的

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}
/>

Answer 7

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

sections={sections as any[]}