Búsqueda de sitios web

react native - SectionList y Typescript


¿Cuál es la manera correcta de escribir SectionList? Me he encontrado con un error donde esto funciona (del ejemplo de la documentación):

        <SectionList
          renderItem={({item, index}) => <Text key={index}>{item}</Text>}
          renderSectionHeader={({section: {title}}) => (
            <Text style={{fontWeight: 'bold'}}>{title}</Text>
          )}
          sections={ticksData}
          keyExtractor={(item, index) => item + index}
        />;

Pero esto no:

const renderSectionHeader=({section: {title}}) => (
  <Text style={{fontWeight: 'bold'}}>{title}</Text>
 );

return (
        <SectionList
          renderItem={({item, index}) => <Text key={index}>{item}</Text>}
          renderSectionHeader={renderSectionHeader}
          sections={ticksData}
          keyExtractor={(item, index) => item + index}
        />;

Obtengo este error:

Los tipos de la propiedad 'renderSectionHeader' son incompatibles. El tipo '({ section: { title } }: { section: { title: any; }; }) => Element' no se puede asignar al tipo '(info: { section: SectionListData; }) => ReactElement'. Los tipos de los parámetros '__0' e 'info' son incompatibles. El tipo '{ section: SectionListData; }' no se puede asignar al tipo '{ section: { title: any; }; }'. Los tipos de la propiedad 'section' son incompatibles. El tipo 'SectionListData' no se puede asignar al tipo '{ title: any; }'. Falta la propiedad 'title' en el tipo 'SectionListData'.

Respuesta #1

Tuve el mismo problema, llegué a esta respuesta pero aún no había solución, así que aquí está la mía:

import { SectionList, SectionListData } from 'react-native';

interface IHeader {
  section: SectionListData<{ title: string }>
}

const renderSectionHeader=({section: {title}}: IHeader) => (
  <Text style={{fontWeight: 'bold'}}>{title}</Text>
);

Artículos relacionados