反応成分対容器

Question

反応が新しく、成分を分離しようとしています。次の例のコンテナまたはコンポーネントはありますか？私にとってはどちらもコンポーネントですが、リンクタグとルートタグを持っているのでわかりません。

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

私はあなたが反応におけるプレゼンテーションやコンテナのコンポーネントの概念を知りたいかもしれないと思います。あなたの2つの例はどちらも、プレゼンテーションのために受け取った小道具を使用するだけなので、プレゼンテーションコンポーネントです。彼らは正しい小道具のデータを得る方法を気にしません。プレゼンテーションコンポーネントとは対照的に、コンテナコンポーネントは、どのように動作するかを気にします。プレゼンテーションコンポーネントは自分自身のUIロジックについてのみ関心がありますが、ビジネスロジックを担当する必要があります。 This is an detailed explanation.