只需cv，实战中学习next | 动态组件-实现用户信息组件

王志远，微医前端技术部

前言

​ 我们一直在实现页面路由，但日常路由视图都是由很多个组件实现的，这些组件我们通常放在根目录下的component下；我们封装一个用户信息组件。默认不展示，点击按钮后再展示，这样就能顺便学习下 next 中的动态加载组件。

开始实现

实现思路

• 详情渲染：根据 id 请求后端接口获取用户信息
• 动态加载：封装 UserInfo 组件，默认不展示，点击按钮才展示
• 相对时间：接入moment

安装依赖

yarn add moment@2.29.3

具体实现

detail.tsx

import React, { useState } from "react";
import UserLayout from "./";
import { withRouter } from "next/router";
import { Button } from "antd";
import axios from "../../utils/axios";
import dynamic from "next/dynamic";
const UserInfo = dynamic(import("../../components/UserInfo"));

function UserDetail(props) {
  let [show, setShow] = useState(false);
  return (
    <UserLayout>
      <p>ID: {props.router.query.id}</p>
      <Button onClick={() => setShow(!show)}>显示/隐藏</Button>
      {show && <UserInfo user={props.user} />}
    </UserLayout>
  );
}
UserDetail.getInitialProps = async (ctx) => {
  let response = await axios({
    url: `/api/users/${ctx.query.id}`,
    method: "GET",
  });
  return { user: response.data.data };
};
export default withRouter(UserDetail);

新建component/UserInfo.tsx，并实现如下内容

import { useState } from "react";
import { Button } from "antd";
function UserInfo(props) {
  let [created, setCreated] = useState(props.user.created);
  async function changeFormat() {
    let moment = await import("moment");
    setCreated(moment.default(props.user.created).fromNow());
  }
  return (
    <>
      <p>用户名:{props.user.username}</p>
      <p>密码:{props.user.password}</p>
      <p>
        创建时间:{created}
        <Button onClick={changeFormat}>切换为相对时间</Button>
      </p>
    </>
  );
}
export default UserInfo;

项目目录

├── component
│   ├── UserInfo.tsx
├── pages
│   ├── index.tsx
│   ├── profile.tsx
│   └── user
│       └── index.tsx
│       └── list.tsx
│       └── detail.tsx

实现效果