[英]tsdoc-param-tag-with-invalid-name: The @param block should be followed by a valid parameter name (TypeScript ESLint and React)
I'm using JSDoc and TSDoc for a React Native project with TypeScript.我将 JSDoc 和 TSDoc 用于带有 TypeScript 的 React Native 项目。 There is some strange behavior when documentings props.
记录道具时有一些奇怪的行为。
All @param: props.propName are underlined with message:所有@param: props.propName 都带有下划线消息:
tsdoc-param-tag-with-invalid-name: The @param block should be followed by a valid parameter name: The identifier cannot non-word characterseslinttsdoc/syntax
Also, I'm obliged to add : Props twice because if I only put it in FC the props are underlined with:另外,我不得不添加 : Props 两次,因为如果我只将它放在 FC 中,则道具会带有下划线:
'onPress' is missing in props validationeslintreact/prop-types
The code:编码:
import React, { useContext, FC } from 'react'
import { GestureResponderEvent, ViewStyle } from 'react-native'
import { useNavigation } from '@react-navigation/native'
import { UserAvatarContext } from '../apps'
import Avatar from './Avatar'
interface Props {
size?: number
radius?: number
style?: ViewStyle
onPress?: (event: GestureResponderEvent) => void
}
/**
* Display the user profile avatar and link
*
* @param props - React props
* @param props.size - the size of the avatar in pixels
* @param props.radius - the border radius in pixels
* @param props.onPress - the function to use when pressing the avatar (by default, navigate to the user profile page)
* @param props.style - Additional style information
* @returns The avatar icon
*/
const UserAvatar: FC<Props> = ({ size = 40, radius, style, onPress }: Props) => {
const navigation = useNavigation()
const { source } = useContext(UserAvatarContext)
const defaultOnPress = (): void => navigation.navigate('My profile')
return <Avatar source={source} onPress={onPress || defaultOnPress} size={size} style={style} radius={radius} />
}
export default UserAvatar
I'd like it to be clean, yet I feel I need to make some configurations or modify the way of declaring my props.我希望它干净,但我觉得我需要做一些配置或修改声明我的道具的方式。 Any idea?
任何的想法?
Thanks谢谢
Just move the property description to the interface definition, like on below:只需将属性描述移动到接口定义,如下所示:
import React, { useContext, FC } from 'react'
import { GestureResponderEvent, ViewStyle } from 'react-native'
import { useNavigation } from '@react-navigation/native'
import { UserAvatarContext } from '../apps'
import Avatar from './Avatar'
interface Props {
// the size of the avatar in pixels
size?: number
// the border radius in pixels
radius?: number
// Additional style information
style?: ViewStyle
// the function to use when pressing the avatar (by default, navigate to the user profile page)
onPress?: (event: GestureResponderEvent) => void
}
/**
* Display the user profile avatar and link
*
* @param props - React props
*/
const UserAvatar: FC<Props> = ({ size = 40, radius, style, onPress }: Props) => {
const navigation = useNavigation()
const { source } = useContext(UserAvatarContext)
const defaultOnPress = (): void => navigation.navigate('My profile')
return <Avatar source={source} onPress={onPress || defaultOnPress} size={size} style={style} radius={radius} />
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.