React Props Component
Run
↔
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React Props Component</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="member"></div> <script type="text/babel"> function Avatar(props){ return( <div className="avatar"> <img src={props.avatar.path} alt="" /> </div> ) }; function MemberInfo(props){ return( <div className="info"> <Avatar avatar={props.info} /> <h2>{props.info.name}</h2> <p>Tuổi: {props.info.age}</p> </div> ) }; function Comment(props){ return( <div className="comment"> {props.text} </div> ) }; function Member(){ return( <div className="member"> <MemberInfo info={member.info} /> <Comment text={member.text} /> </div> ) }; const member = { text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit proin sit amet neque.', info: { path: 'images/img_avatar.jpg', name: 'Nguyễn Văn A', age: 25 } }; ReactDOM.render( <Member />, document.getElementById('member') ); </script> </body> </html>
