检查作为包装器组件一部分的内部React组件的类型

Question

我有包含组件A的组件B。组件A定义了PropType以验证其属性。我希望组件B中有一个表示组件a中属性的属性，验证它们并引用它们。我似乎不明白。以下是我到目前为止所做的（为简化本次讨论而抽象）：

class ComponentB extends PureComponent {
    static propTypes = {
        componentAProperties: PropTypes.shape(ComponentA.propTypes)
        compBProp1: PropType.number,
        compBProp2: PropType.string,
        compBProp3: PropType.object
    }
    render() {
        const {componentAProperties, ...others} = this.props
        return (
            <ComponentB {...others}>
                <ComponentA {...componentAProperties} />
            </ComponentB
        )
    }
}

class ComponentA extends PureComponent {
    static propTypes = {
        compAProp1: PropTypes.string,
        compAProp2: PropTypes.number,
        compAProp3: PropTypes.oneOf(['cat', 'dog', 'mouse'])
        compAProp4: PropTypes.bool,
        compAProp5: PropTypes.object
    }
    render() {
        const {...others} = this.props
        return <ComponentA {...others} />
    }
}

ComponentB中包含PropTypes.shape的行不会抛出任何警告，但是我仍然可以向ComponentA传递虚假的属性值，所以我觉得仍然缺少一些东西。也就是说，我可以写作

<ComponentB componentAProperties={{compAProp2: 'hello'}} />

没有警告或错误，即使compAProp2被定义为一个数字。

（注意：我测试了PropTypes。将ComponentA、ComponentA. PropTypes和ComponentA. propTypes作为组件属性值，并且它们都抛出了控制台警告，失败的道具类型： ComponentB：道具类型组件属性无效；它必须是一个函数，通常来自prop-type包，但收到了<代码>对象.（

我读到有一些自定义验证器可以编写，但这些似乎只适用于proptype。arrayOf（）和PropTypes。objectOf（）而ComponentA的PropType是一个形状。

我提到的其他问题：

• React composition component proptypes为什么不：我想要一个特定的属性来引用内部组件，而不仅仅是扩展内部组件的属性

Answer 1

从我看来，你的方法已经是正确的了。所以我马上在JSFIDLE中尝试。我已经修复了您的“抽象”代码示例，这样它就可以在不改变任何内容的情况下工作。

这是小提琴：https://jsfiddle.net/gejimayu/cnhw4vzy/2/

我以此为例。

如您所见，如果打开浏览器的控制台，您将看到一个proptype警告。

所以你的方法没有错。

但是，如果我将prop类型包更改为生产版本，它将不会显示任何警告。

因此，我认为这一定与生产/开发建设有关。Proptype只会在开发构建时显示警告。因此，如果您希望看到任何警告，请将您的环境构建更改为开发。

除此之外，如果您没有，请使用道具型包装。https://www.npmjs.com/package/prop-types

React对prop类型的"本机"支持已停止。https://reactjs.org/docs/typechecking-with-proptypes.html

希望有帮助。