TypeScript + React：添加 Layout & 组件

最新推荐文章于 2024-06-24 09:46:46 发布

荷包蛋_

最新推荐文章于 2024-06-24 09:46:46 发布

阅读量804

点赞数

分类专栏： typescript react 文章标签： react ts typescript javascript 前端

本文链接：https://blog.csdn.net/iamxuqianqian/article/details/116305697

版权

本文介绍如何使用TypeScript和React构建一个员工管理系统，涵盖Layout组件作为应用框架，Employee组件用于员工查询，Setting组件实现系统设置。项目依赖于antd库，并计划在后续添加路由设置。

摘要由CSDN通过智能技术生成

这一篇，我们来堆砌组件（不包含事件处理和数据请求）。

知识点在此 --> React & Typescript：组件的入门实例

项目需求

一个简单的员工管理系统，分为两部分功能：员工管理 和 系统设置。在员工管理部分，可以通过员工的姓名和部门进行查询员工的信息；在系统设置部分，进行简单的系统配置。

在这里插入图片描述

实现

Layout

src/index.tsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(<App />, document.querySelectorAll(".app")[0]);

引入 <App /> 组件，App 是整个应用的框架。

src/components/App.tsx

import React from "react";
import {
      Menu, ConfigProvider, Layout } from "antd";
import zhCN from "antd/lib/locale/zh_CN";

import Employee from "./employee";
import Setting from "./setting";

import "./App.css";

const {
      Header, Content, Footer } = Layout;

const App = () => (
  <ConfigProvider locale={
     zhCN}>
    <Layout>
      <Header>
        <Menu
          mode="horizontal"
          theme="dark"
          className