Webstorm无法识别... props的prop类型

时间:2020-01-18 11:20:56

标签: javascript reactjs react-proptypes

我要声明一个这样的函数:

const StudentVideoContainer = ({ course, video, currentScore, storedScore, goal, match, ...props}) => {

其中有一些我不想破坏的附加到props对象上的动作。海事组织,那条链就足够长了。但是,道具类型似乎不愿意识别这些功能,只要我不知道。 enter image description here

我这样声明自己的原型:

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周前,我才知道像这样的道具验证还不是一件容易的事,所以我认为我做错了。

1 个答案:

答案 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”更改为数字,然后您会在控制台中看到道具验证有效)