如何在 React 中验证组件内组件的 props？

Question

我一直在检查我的应用程序并使用 SonarLint 添加道具验证来验证我的工作，到目前为止一切都很好。但我需要验证嵌套在主组件中的组件，并且无法弄清楚如何正确构建它。

我的组件：

import PropTypes from 'prop-types';

export const Parent1 = () => {
    ...

    const ChildOfParent1 = ({ data }) => {
        ...
    }
}

const Parent2 = ({ value, onFuction }) => {
    ...
}

以及我一直在做的 PropTypes 验证：

Parent2.propTypes = {
    value: PropTypes.object,
    onFuction: PropTypes.func,
}

ChildOfParent1.PropTypes = {
    data: PropTypes.object,
} 

SonarLint 似乎并不认为 ChildOfParent1 有效，因为有关 ChildOfParent1 中未验证道具的警告仍然显示

我尝试执行以下操作：

Parent1.ChildOfParent1.propTypes = {
    data: PropTypes.object,
}

但是 SonarLint 却说

'data' PropType is defined but prop is never used

，尽管警告在代码中消失了。

Answer 1

没有理由需要将组件嵌套在里面

Parent1

你仍然可以这样做并且仍然可以实现需要实现的目标

const ChildOfParent1 = ({ data }) => {
        ...
}

export const Parent1 = () => {
    ...
}

const Parent2 = ({ value, onFuction }) => {
    ...
}

这样您就可以用您的

PropTypes

做任何您需要做的事情。