標籤：
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‘));
[React] Extracting Private React Components
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
