您的位置：首页 > Web前端 > React

[React] Extracting Private React Components

2015-12-31 04:05 621 查看

we leverage private components to break our render function into more manageable pieces without leaking the implementation details of our component.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="//fb.me/react-0.14.3.js"></script>
<script src="//fb.me/react-dom-0.14.3.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>

const users = [
{ name: 'Merrick', id: 1 },
{ name: 'John', id: 2 },
{ name: 'Trevor', id: 3 }
]

const UserListItem = ({user}) => {
return (
<div>
{user.name}
</div>
);
};

class UserList extends React.Component {
render(){
return (
<div>
<h1>Users</h1>
{
this.props.users.map( (user) => {
return <UserListItem user={user} key={user.id} />
})
}
</div>
);
}
}

ReactDOM.render(<UserList users={users} />, document.getElementById('app'));

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航