Wie definiere ich propTypes für eine Komponente, die mit withRouter umschlossen ist?

Question

Ich frage mich, was die Best Practices sind für die Definition propTypes auf einer Komponente, die mit einem 3rd-Party-HOC, in diesem Fall withRouter() von React-Router verpackt werden.

Es ist mein Verständnis, dass der Punkt propTypes ist, so dass Sie (und andere Entwickler) wissen, was Requisiten eine Komponente erwarten sollte, und React wird Warnungen geben, wenn dies verletzt wird.

Daher, da die Requisiten über Standort bereits von withRouter() ohne menschlichen Eingriff übergeben werden, ist es notwendig, sich um sie hier zu kümmern?

Hier wird die Komponente Ich arbeite mit:

const Menu = ({ userId, ...routerProps}) => { 

    const { pathname } = routerProps.location 
    return (
     // Something using userID 
     // Something using pathname 
) 
} 

Menu.propTypes = { 
    userId: PropTypes.number.isRequired, 
    // routerProps: PropTypes.object.isRequired, 
    //^this is undefined, bc withRouter passes it in later? 
} 

export default withRouter(Menu) 

//.... in parent: 
<Menu userId={id} /> 

Was wäre die Konvention in diesem Fall?

Answer 1

Es ist mein Verständnis, dass der Punkt von propTypes ist, damit Sie (und andere Entwickler) wissen, was Requisiten eine Komponente erwarten sollte, und React wird Warnungen geben, wenn dies verletzt wird.

Das ist richtig.

Was wäre die Konvention in diesem Fall?

Ich glaube nicht, dass Sie eine endgültige Antwort darauf finden werden. Einige werden argumentieren, dass wenn Sie einen propType definieren, sollten Sie alle erwarteten Prop-Typen definieren. Andere werden sagen, wie Sie es getan haben, dass es nicht von der Mutterkomponente (mit Ausnahme des HOC) zur Verfügung gestellt wird, also warum sollte man sich die Mühe machen. Es gibt eine andere Kategorie von Menschen, die Ihnen sagen, nicht mit propTypes überhaupt ...

persönlich zu kümmern, ich falle in die erste oder letzte Kategorie:

• Wenn die Komponente für den Verzehr durch andere, wie eine gemeinsame ui-Komponente (zB TextField, Button, etc.) oder die Schnittstelle für eine Bibliothek, dann propTypes sind hilfreich, und Sie sollten sie alle definieren.
• Wenn die Komponente nur für einen bestimmten Zweck in einer einzigen App verwendet wird, ist es in der Regel in Ordnung, sich nicht um sie zu kümmern, da Sie mehr Zeit für die Pflege der Komponente aufwenden müssen, als die falschen Requisiten Sie schreiben kleine, einfach zu konsumierende funktionale Komponenten).

Das Argument für die routerProps einschließlich würden Sie gegen Änderungen zu schützen, um die vorgesehenen Stützen von withRouter sollten sie jemals in der Zukunft ändern.

So vorausgesetzt, Sie die propTypes für withRouter enthalten sein sollen, dann müssen wir Zusammenbruch, was sie eigentlich sein sollte:

bei dem obigen Schnipsel

const Menu = ({ userId, ...routerProps}) => { 
    const { pathname } = routerProps.location 
    return (
     // Something using userID 
     // Something using pathname 
) 
} 

Suchen Sie die propTypes

sein sollte denken kann

Menu.propTypes = { 
    userId: PropTypes.number.isRequired, 
    routerProps: PropTypes.object.isRequired 
} 

Aber du würdest dich irren ...Diese ersten 2 Zeilen enthalten eine Menge von props Transformation. In der Tat sollte es

sein

Menu.propTypes = { 
    userId: PropTypes.number.isRequired, 
    location: PropTypes.shape({ 
    pathname: PropTypes.string.isRequired 
    }).isRequired 
} 

Warum? Das Snippet ist äquivalent zu:

const Menu = (props) => { 
    const userId = props.userId 
    const routerProps = Object.assign({}, props, { userId: undefined } 
    const pathname = routerProps.location.pathname 
    return (
     // Something using userID 
     // Something using pathname 
) 
} 

Wie Sie sehen können, ist routerProps nicht tatsächlich in der props überhaupt. ...routerProps ist ein rest parameter, so dass es alle anderen Werte der props, in diesem Fall location (und vielleicht andere Dinge, die Sie nicht interessieren) bekommt.

Hoffe, dass hilft.