TypeScript + React：列表渲染 & 路由配置

在 上一篇 中，我们为表单元素绑定了事件、封装了 Axios、向后端发送了 get 请求以及搭建了 mock server – 将请求转发到了本地，并返回了一个 json。接下来我们就用这个 response 渲染表单以及项目路由的配置。

列表渲染

兄弟组件间的通讯

/*
 ** src/components/employee/index.tsx
 */

class Employee extends Component {
   
  render() {
   
    return (
      <>
        <QueryForm />
        <Table columns={
   employeeColumns} className="table" />
      </>
    );
  }
}

我们可以看到 Employee 分为 QueryForm 和 Table 两个组件。数据返回在 QueryForm 中，那么如何用该数据渲染 Table 呢？

我们可以在他们的父组件（Employee）中添加一个状态，将状态绑定到 Table 上，然后为 QueryForm 添加一个回调 – 以控制该状态。

import {
    EmployeeResponse } from "../../interface/employee";

interface State {
   
  employee: EmployeeResponse;
}

class Employee extends Component<{
   }, State> {
   
  state: State = {
    employee: undefined };
  setEmployee = (employee: EmployeeResponse) =>