React ostrzega przed przekazaniem propu o wartości null, gdzie PropType dla podpory nie jest wymagany.

Question

Mam komponent, który odbiera błąd jako ciąg lub obiekt z 2 wymaganymi właściwościami. Ale null można również przekazać dla tego wniosku. W mojej obecnej konfiguracji React generuje ostrzeżenie, gdy zerowy jest przekazywany:

Ostrzeżenie: Nie udało typu prop: Nieprawidłowy prop error dostarczane ErrorDialog

Co mam zmienić na React aby umożliwić NULL | ciąg | obiekt o tym kształcie? Dziękuję Ci!

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

pełny kod jest:

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; 

chcę ukryć okno, gdy nie ma błędu, pokaż oryginalny łańcuch, jeśli błąd jest typu ciąg i renderowanie przetłumaczoną wiadomość jeśli deskryptor komunikatu jest określony.

UPDATE: Poszedłem z roztworem tak:

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

Czytaj this issue i this issue dyskusji wydarzyło się w przeszłości. Po prostu dodaj opcjonalnie props.error i sprawdź wartość w swoim kodzie. W przeciwnym razie musisz zaimplementować własny niestandardowy prop validation.

Od docs:

// 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.' 
    ); 
    } 
}