import React from "react";import 'bootstrap/dist/css/bootstrap.min.css';const infoMap = { url: 'src/chapterOne/Assets/liupiaopiao.png', loadingInfo: '加载中...', nickName: 'liupiaopiao_666', userName: '柳飘飘', age: 18, nickNameInfo: '昵称：', userNameInfo: '用户名：', ageInfo: '年龄：', partTitle: '组件的切分与组合的简单示例', dateNameInfo: '时间：',};// 格式化时间function formatDate(date) { return date.toLocaleDateString();}// 封装图片信息const avatar = { url: infoMap.url, alt: infoMap.loadingInfo, nickName: infoMap.nickName};// 封装用户信息const userInfo = { name: infoMap.userName, age: infoMap.age,};// 封装时间信息const date = { date: formatDate(new Date()),};// 图片信息组件function Avatar(props) { return ( <span> <img src={props.avatar.url} alt={props.avatar.alt} /> <p>{infoMap.nickNameInfo} {props.avatar.nickName}</p> </span> );}// 用户信息组件function UserInfo(props) { return ( <span> <p>{infoMap.userNameInfo} {props.userInfo.name}</p> <p>{infoMap.ageInfo} {props.userInfo.age}</p> </span> );}// 用户详细信息组件function UserDetailInfo(props) { return ( <div> <Avatar avatar={props.avatar} /> <hr/> <UserInfo userInfo={props.userInfo} /> <hr/> <span> <p>{infoMap.dateNameInfo} {props.curdate.date}</p> </span> </div> );}// 用户详细信息组件，展示用户信息中的细节数据const userDeatil = <UserDetailInfo avatar={avatar} userInfo={userInfo} curdate={date}/>; const ComponentDispart= () => { return( <span> <h3>{infoMap.partTitle}</h3> {userDeatil} </span> );}export default ComponentDispart;

展示效果：