反应组分vs容器

我是新来的反应，我试图分开组件。以下示例容器或组件？对于我来说都是组件，但我不确定，因为他们有链接标记和路由标记。反应组分vs容器

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;

来源

2017-06-21 Agustin Castro

我想你可能想知道表象和容器组件的阵营概念。你的两个例子都是表象元素，因为他们只是使用他们收到的道具来渲染他们的外表。他们不在乎如何获得正确的道具数据。与展示组件不同，容器组件关心事物的工作方式。他们应该负责业务逻辑，而表示组件只关心自己的UI逻辑。 This is an detailed explanation.

来源

2017-06-21 02:26:22

只是作为一个附录，您对“组件”或“容器”的引用映射到这些“表示”和“容器”组件。 –

反应组分vs容器

回答

相关问题