React中如何验证嵌套在组件内部的子组件Props？

问题根源 #

你遇到的问题核心是内部嵌套组件的作用域问题，以及PropTypes的拼写错误：

1. ChildOfParent1是Parent1函数内部定义的组件，外部作用域无法访问它，所以你在外部写ChildOfParent1.PropTypes（注意这里还写错了，正确是小写的propTypes）根本不会生效，SonarLint自然检测不到验证规则。
2. 你尝试的Parent1.ChildOfParent1.propTypes写法完全错误：Parent1是函数组件，不是对象，给它挂载的属性和内部的ChildOfParent1没有任何关联，这个验证规则根本没被实际组件使用，所以SonarLint提示“定义了但未使用”。

正确解决方案 #

把ChildOfParent1的PropTypes定义直接放在Parent1函数内部，和组件定义在同一个作用域下：

import PropTypes from 'prop-types';

export const Parent1 = () => {
    // ... Parent1的逻辑

    const ChildOfParent1 = ({ data }) => {
        // ... ChildOfParent1的逻辑
    }

    // 直接在内部绑定propTypes
    ChildOfParent1.propTypes = {
        data: PropTypes.object,
        // 可选：如果data是必填项，加上.isRequired
        // data: PropTypes.object.isRequired,
    }

    return (
        // ... 渲染ChildOfParent1的代码
    )
}

const Parent2 = ({ value, onFunction }) => { // 修正拼写错误：onFuction → onFunction
    // ... Parent2的逻辑
}

Parent2.propTypes = {
    value: PropTypes.object,
    onFunction: PropTypes.func, // 对应上面的修正
}

补充说明 #

• 确保PropTypes的拼写是小写的propTypes，你之前写成了大写的PropTypes，这是常见错误。
• 如果ChildOfParent1不需要暴露给外部组件使用，完全没必要把它挂载到Parent1上，内部定义+内部绑定propTypes是最合理的做法，SonarLint也能正确识别验证规则。

内容的提问来源于stack exchange，提问作者npfist