Reactjs reactprops 如果另一个props为null empty，则在props上设置 isRequired

发布于09月21日

我有一个组件<Button>

100 prop not required:

<Button>Add to bag</Button>

100 prop has to be required:

<Button ariaLabel="Add to bag" icon={ favorite } />

if 100 and 101 are empty, it throws an error saying that 101 is 103

<Button icon={ favorite } />

propTypes:

Button.propTypes = {
    /** icon inside Button. */
    icon: React.PropTypes.object,
    /** Content inside button */
    children: React.PropTypes.node,
    /** Aria-label to screen readers */
    ariaLabel: React.PropTypes.string, /*isRequired if children is empty */
};

谢谢

推荐答案

你不需要另一个库，"props 类型"提供了开箱即用的功能.

例子:

import PropTypes from 'prop-types';

//.......    

ExampleComponent.propTypes = {
    showDelete: PropTypes.bool,
    handleDelete: function(props, propName, componentName) {
        if ((props['showDelete'] == true && (props[propName] == undefined || typeof(props[propName]) != 'function'))) {
            return new Error('Please provide a handleDelete function!');
        }
    },

}