Question

我有包含组件A的组件B。组件A具有定义为验证其属性的propTypes。我想在组件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.propTypes）的行不会引发任何警告，但是我仍然可以将虚假的属性值传递给ComponentA，所以我感觉仍然缺少一些东西。也就是说，我可以写

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

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

（注意：我测试了PropTypes.ComponentA，ComponentA.PropTypes和ComponentA.propTypes作为componentAProperties值，所有这些都抛出了控制台警告，“失败的道具类型：ComponentB：道具类型{ {1}}无效；通常必须是componentAProperties包中的函数，但必须是prop-types的函数。）

我了解到有一些可以编写的自定义验证器，但是它们似乎仅适用于PropTypes.arrayOf（）和PropTypes.objectOf（），而ComponentA的propTypes是形状。

我引用的其他问题

React composition component proptypes 为什么不呢？我想要一个特定的属性来引用内部组件，而不仅仅是散布内部组件的属性。
Should wrappers component remind propTypes of wrapped components? 为什么不这样做：建议的答案不起作用。它将引发警告，“失败的prop类型：：prop类型object无效；它必须是一个函数，通常来自<inner component>包，但已收到prop-types。

Answer 1

据我所见，您的方法已经正确。所以我马上在JSFiddle中尝试。我已修复您的“抽象”代码示例，以使其在本质上不做任何更改即可工作。

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

我以这个为例。

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

如您所见，如果打开浏览器的控制台，则会看到属性警告。

所以您的方法没有错。

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

因此，我认为它必须与生产/开发版本有关。原型只会在开发构建时显示警告。因此，如果您希望看到任何警告，请务必将您的环境构建更改为开发。

除此之外，请使用prop-type软件包。 https://www.npmjs.com/package/prop-types

对prop-types的“本地”响应支持已停止。 https://reactjs.org/docs/typechecking-with-proptypes.html

希望有帮助。

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

1 个答案: