रिएक्ट वैल्यू के साथ पास प्रोप के बारे में चेतावनी देता है, जहां प्रोप टाइप के लिए प्रोप टाइप की आवश्यकता नहीं होती है

Question

मेरे पास एक घटक है जो त्रुटि प्राप्त करता है या तो एक स्ट्रिंग या ऑब्जेक्ट के रूप में 2 आवश्यक गुणों के साथ प्राप्त करता है। लेकिन इस प्रोप के लिए शून्य भी पारित किया जा सकता है।

चेतावनी:: विफल प्रोप प्रकार: अमान्य प्रोप error ErrorDialog

क्या मैं बदल जाएगा अशक्त अनुमति देने के लिए प्रतिक्रिया करने के लिए आपूर्ति की मेरी मौजूदा सेटअप प्रतिक्रिया में एक चेतावनी जब अशक्त पारित हो जाता है फेंकता | स्ट्रिंग | इस आकार के साथ ऑब्जेक्ट? धन्यवाद!

ErrorDialog.propTypes = { 
    onResetError: PropTypes.func.isRequired, 
    error: PropTypes.oneOfType([ 
    PropTypes.shape({ 
     id: PropTypes.number.isRequired, 
     defaultMessage: PropTypes.string.isRequired, 
    }), 
    PropTypes.string, 
    ]), 
}; 

पूरा कोड है:

import React, { PropTypes } from 'react'; 
import Dialog from 'material-ui/Dialog'; 
import FlatButton from 'material-ui/FlatButton'; 
import { FormattedMessage } from 'react-intl'; 

const ErrorDialog = ({ error, onResetError }) => { 
    function renderError() { 
    if (!error) { 
     return null; 
    } else if (typeof error === 'string') { 
     return error; 
    } else if (typeof error === 'object') { 
     return <FormattedMessage {...error} />; 
    } 
    return null; 
    } 

    return (
    <Dialog 
     modal={false} 
     open={Boolean(error)} 
     actions={ 
     <FlatButton 
      label="OK" 
      primary 
      onTouchTap={onResetError} 
     /> 
     } 
    > 
     {renderError()} 
    </Dialog> 
); 
}; 

ErrorDialog.propTypes = { 
    onResetError: PropTypes.func.isRequired, 
    error: PropTypes.oneOfType([ 
    PropTypes.shape({ 
     id: PropTypes.number.isRequired, 
     defaultMessage: PropTypes.string.isRequired, 
    }), 
    PropTypes.string, 
    ]), 
}; 

export default ErrorDialog; 

मैं जब वहाँ कोई त्रुटि है, तो मूल स्ट्रिंग दिखाने के लिए, यदि त्रुटि प्रकार स्ट्रिंग की है और किसी अनुवादित संदेश अगर एक प्रस्तुत करना संवाद छुपाना चाहते हैं, संदेश वर्णनकर्ता निर्दिष्ट है।

अद्यतन: मैं इस तरह समाधान के साथ चला गया:

ErrorDialog.propTypes = { 
    onResetError: PropTypes.func.isRequired, 
    // eslint-disable-next-line consistent-return 
    error(props, propName, componentName) { 
    const prop = props[propName]; 
    if (prop !== null && 
     typeof prop !== 'string' && 
     !(typeof prop === 'object' && prop.id && prop.defaultMessage)) { 
     return new Error(
     `Invalid prop \`${propName}\` supplied to ${componentName}. Validation failed.` 
    ); 
    } 
    }, 
}; 

Answer 1

पढ़ें this issue और विचार विमर्श के लिए this issue अतीत में क्या हुआ। बस props.error वैकल्पिक बनाएं और अपने कोड में मूल्य देखें। अन्यथा, आपको अपना खुद का कस्टम prop validation लागू करना होगा।

डॉक्स से:

// You can also specify a custom validator. It should return an Error 
// object if the validation fails. Don't `console.warn` or throw, as this 
// won't work inside `oneOfType`. 
customProp: function(props, propName, componentName) { 
    if (!/matchme/.test(props[propName])) { 
    return new Error(
     'Invalid prop `' + propName + '` supplied to' + 
     ' `' + componentName + '`. Validation failed.' 
    ); 
    } 
}