四时宝库

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;

展示效果：