Блог

Что, если бы я хотел, чтобы реквизит был типом номера и в то же время требовался? Насколько я знаю, для этого мне нужно создать собственный валидатор. Есть ли какой-нибудь более простой и элегантный способ?

 function ShopxItem(props) {
    return (
        <>
            {props.name}
            {props.price}
        </>
    )
}

function PropTypesExample(){
    return (
        <>
            <ShopxItem name="1" price="xdd"></ShopxItem>
        </>
    )
}


ShopxItem.propTypes = {
//i would want to do it in that way but this overwrite "price" and returning an error "Duplicate Key xxx"
    price: PropTypes.number,
    price: PropTypes.isRequired,

// but as far as i know i have to do this like that
    price: (props, propName, componentName) => {
        let error;
        const prop = props[propName];
        if(prop === undefined || isNaN(prop)){error = new Error(`${componentName} price is required and have to be a number`);return error;}
        return null;
    },
}
 

Что — то вроде этого должно сработать:

 price: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired
 

Мы перешли на использование air-bnb or для этой цели вместо oneOfType , хотя я не могу точно вспомнить, почему. В любом случае этот пакет также может представлять для вас интерес.