javascript - 定义内部函数的属性类型的功能组件和类组件有什么区别?
问题描述
功能组件和类组件在内部定义函数的属性类型有什么区别?
例如,
在类组件中,没有问题。
class ListView extends React.Component {
...
renderItem: SectionListRenderItem<Circle> = ({ item }) => { // no lint warning
const { circleStore } = this.props
return (
<CircleList
hideButton
title={item.title}
desc={item.desc}
iconSource={{ uri: item.logoImageUrl }}
onPress={() => circleStore && circleStore.setCurrentCircle(item)}
></CircleList>
)
}
render() {
return (
<SectionListView ... />
)
}
}
...
在功能组件中,它使'item' is missing in props validation - eslint(react/prop-types)
问题如下。
...
const ListView = (props: Props) => {
const renderItem: SectionListRenderItem<Circle> = ({ item }) => ( // lint warning
<CircleList
hideButton
title={item.title}
desc={item.desc}
iconSource={{ uri: item.logoImageUrl }}
onPress={() => {}}
></CircleList>
)
...
return (
<SectionListView ... />
)
}
...
它可以修复如下代码
const renderItem: SectionListRenderItem<Circle> = ({ item }) => (
改成
const renderItem: SectionListRenderItem<Circle> = ({ item }: { item: Circle }) => (
Circle
是我声明的接口。
我想知道为什么会发生这种情况以及有什么区别。与类组件相比,只有renderItem
在无状态组件中才会出现 lint 错误。
完整来源
interface Props {
popularCircles: Circle[]
recentCircles: Circle[]
onPressSection?: (section: Circle) => void
onPressCircle?: (circle: Circle) => void
}
export const Main = ({
popularCircles,
recentCircles,
onPressCircle,
}: Props) => {
const renderSectionHeader = ({ section: { title } }: SectionHeader) => {
return (
<SectionHeaderCell
title={title}
buttonTitle={''}
disabled
></SectionHeaderCell>
)
}
const renderItem: SectionListRenderItem<Circle> = ({
item,
}) => ( // This line makes a eslint warning only in functional component.
<CircleList
hideButton
title={item.title}
desc={item.desc}
iconSource={{ uri: item.logoImageUrl }}
onPress={() => onPressCircle && onPressCircle(item)}
></CircleList>
)
return (
<Container>
<SectionList
sections={[
{
title: 'Title1',
data: popularCircles,
},
{
title: 'Title2',
data: recentCircles,
},
]}
renderSectionHeader={renderSectionHeader}
renderItem={renderItem}
keyExtractor={(item, index) => item + index}
contentContainerStyle={{ flex: 1 }}
/>
</Container>
)
}
export default Main
Circle.d.ts
export interface Circle {
circleId: number
title: string
desc: string
logoImageUrl?: string
}
解决方案
推荐阅读
- oracle - 在 Oracle 函数中返回单行
- html - Bootstrap 4动画导航栏不显示
- amazon-kinesis - KCL 应用程序在使用多个流时不会占用所有分片
- android - 如何使用 PathPattern 来创建 DeepLink Apps Android?
- javascript - 使用 React 中的属性可以将哪些不同类型的道具从一个组件发送到另一个组件?
- android - 无法从 Android 中的 API 获取数据
- markdown - 如何在 GitHub Pages 上的 Markdown 列表中放置超链接?
- java - 尝试在 Java 中的数组上使用 .stream() 时出现“找不到符号错误”
- c# - 执行队列
- listview - xamarin forms:如果当前绑定值为空或null,如何绑定另一个值?