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‘));
时间： 2024-07-30 09:12:22