反應組分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容器

回答

相關問題