function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{props.date}
</div>
</div>
);
}
function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}
function UserInfo(props) {
return (
<div>
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);
}
const author = ({avatarUrl: "http://code.cw.cn/us.jpg", name: "John"});
ReactDOM.render(
<Comment
author={author}
text="This is a test"
date={new Date().toLocaleTimeString()}
/>,
document.getElementById('root')
);
React——Component reuse
最新推荐文章于 2024-04-15 16:46:25 发布