function formatDate(date) {
return date.toLocaleDateString();
}
function Avatar(props) {
return (
<img className="Avatar" src={props.user.avatarUrl} alt= {props.user.name} />
);
}
function UserInfo(props){
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name"> {props.user.name} </div>
</div>
);
}
function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text"> {props.text} </div>
<div className="Comment-date"> {formatDate(props.date)} </div>
</div>
);
}
const comment = {
date: new Date(),
text: 'I hope you enjoy learning React!',
author: {
name: 'Hello Kitty',
avatarUrl: 'http://placekitten.com/g/64/64'
}
};
ReactDOM.render(
<Comment date={comment.date} text={comment.text} author={comment.author} />,
document.getElementById('root')
);
prop
prop 是组件的对外接口(property)
state
state 是组件的内部状态
对外用prop ,内部用 state