reagieren Komponente gegen Container

Question

Ich bin neu zu reagieren und ich versuche, die Komponente zu trennen. Sind die folgenden Beispiele Container oder Komponenten? Für mich sind beide Komponenten, aber ich bin nicht sicher, weil sie Link-Tag und Route-Tag haben.

Page.jsx

<main role="application"> 
     <Switch> 
     {/* Home */} 
     <Route path="/" exact component={Home} /> 
     {/* Profile */} 
     <Route path="/user/:id" exact component={Profile} /> 
     {/* Error 404 */} 
     <Route component={Error404} /> 
     </Switch> 
    </main> 

User.jsx:

function User(props) { 
    return (
    <div id={`user-${props.id}`}> 
     <Link to={`/user/${props.id}`}> 
     {props.name} 
     </Link> 
     <p>{props.email}</p> 
    </div> 
); 
} 

User.propTypes = { 
    id: PropTypes.number.isRequired, 
    name: PropTypes.string.isRequired, 
    email: PropTypes.string.isRequired, 
}; 

export default User; 

Answer 1

Ich denke, man kann das Konzept der Präsentations- und Behälterkomponenten in Reaktion wissen wollen. Ihre beiden Beispiele sind beide Präsentationskomponenten, da sie nur die Requisiten verwenden, die sie erhalten, um ihr Aussehen zu rendern. Es ist ihnen egal, wie sie die richtigen Requisiten erhalten. Im Gegensatz zu Präsentationskomponenten kümmern sich Container-Komponenten darum, wie die Dinge funktionieren. Sie sollten für die Geschäftslogik verantwortlich sein, während Präsentationskomponenten nur die UI-Logiken ihrer selbst betreffen. This is an detailed explanation.