我要声明一个这样的函数:
const StudentVideoContainer = ({ course, video, currentScore, storedScore, goal, match, ...props}) => {
其中有一些我不想破坏的附加到props对象上的动作。海事组织,那条链就足够长了。但是,道具类型似乎不愿意识别这些功能,只要我不知道。
我这样声明自己的原型:
StudentVideoContainer.propTypes = {
course: PropTypes.shape({
course: PropTypes.shape({}),
sections: PropTypes.array,
}),
video: PropTypes.shape({}),
currentScore: PropTypes.number,
storedScore: PropTypes.number,
goal: PropTypes.number,
props: PropTypes.shape({
getStudentSingleCourse: PropTypes.func,
clearStudentSingleCourse: PropTypes.func,
getStudentVideo: PropTypes.func,
clearStudentVideo: PropTypes.func,
}),
match: PropTypes.shape({
params: PropTypes.shape({
courseId: PropTypes.string,
videoId: PropTypes.string,
})
})
};
StudentVideoContainer.defaultProps = {
course: PropTypes.shape({}),
video: PropTypes.shape({}),
currentScore: PropTypes.number,
storedScore: PropTypes.number,
goal: PropTypes.number,
props: {
getStudentSingleCourse: PropTypes.func,
clearStudentSingleCourse: PropTypes.func,
getStudentVideo: PropTypes.func,
clearStudentVideo: PropTypes.func,
},
match: PropTypes.shape({
params: PropTypes.shape({
courseId: PropTypes.string,
videoId: PropTypes.string,
})
})
};
我尝试将放置在match
内的所有内容放入props
定义中,并且webstorm停止将其识别为有效,但是当我将其撤回并对其进行结构分解时,webstorm便将其视为有效。
我没有在道具未通过验证的控制台中收到任何错误。而且,如果我将props
下的任何函数更改为PropTypes.func之外的任何其他函数,则会收到一个错误,提示您期望该函数,因此我有理由确定它们实际上已经过验证。
我做错什么了吗?
虽然从技术上讲这不会产生任何错误,但红线会让我发疯,并且我不喜欢下一行抑制注释。直到大约2周前,我才知道像这样的道具验证还不是一件容易的事,所以我认为我做错了。
答案 0 :(得分:1)
但是使用...props
不会引入称为props
的新属性,在这种情况下,这应该可以工作:
// Instead of this
props: PropTypes.shape({
getStudentSingleCourse: PropTypes.func,
clearStudentSingleCourse: PropTypes.func,
getStudentVideo: PropTypes.func,
clearStudentVideo: PropTypes.func,
}),
// Use this (same applies for the defaultProps)
getStudentSingleCourse: PropTypes.func,
clearStudentSingleCourse: PropTypes.func,
getStudentVideo: PropTypes.func,
clearStudentVideo: PropTypes.func,
有关基本示例,请参见 this codesandbox (尝试将“ Random”更改为数字,然后您会在控制台中看到道具验证有效)