穿越时空，纵览中国历史名人：React + TypeScript 实战

2023-11-21 02:34:09

历史的长河浩浩荡荡，孕育出无数风云人物。他们的足迹印刻在岁月的史册中，引领着中华文明的发展。如何以直观生动的形式呈现这些历史巨匠的生命轨迹，激发人们对过往的探究和感悟？

本文将带您踏上一场穿越时空的 React + TypeScript 实战之旅，带领您构建一个展示中国历史人物生卒时间的数据概览应用。通过结合 React 的灵活性和 TypeScript 的类型安全，我们将共同创造一个兼具趣味性和知识性的互动体验。

踏入时空之门，探索历史人物的轨迹

要开始我们的旅程，我们需要准备以下工具：

React：一个用于构建交互式用户界面的 JavaScript 库
TypeScript：一种静态类型化的 JavaScript 超集，可提高代码的可读性和可维护性
中国历史人物传记数据库（CBDB）：一个包含大量中国历史人物信息的宝贵资源

首先，让我们导入必要的 React 和 TypeScript 依赖项：

import React from 'react';
import { useEffect, useState } from 'react';

数据采集：从历史数据库中汲取知识

现在，是时候从 CBDB 中获取历史人物数据了。我们将使用 useEffect 钩子来处理异步数据获取：

const fetchHistoricalFigures = async () => {
  const response = await fetch('https://example.com/cbdb/api');
  const data = await response.json();
  setHistoricalFigures(data);
};

useEffect(() => {
  fetchHistoricalFigures();
}, []);

数据建模：用 TypeScript 构建类型化的历史人物

有了原始数据，我们现在可以利用 TypeScript 的类型化特性来创建历史人物的模型：

interface HistoricalFigure {
  id: number;
  name: string;
  birthDate: string;
  deathDate: string;
}

图表渲染：使用 React 绘制时间线

有了类型化的数据模型，我们可以使用 React 来渲染一个交互式时间线图表，展示历史人物的生卒时间：

const Timelines = () => {
  return (
    <div>
      {historicalFigures.map((figure) => (
        <Timeline key={figure.id} name={figure.name} birthDate={figure.birthDate} deathDate={figure.deathDate} />
      ))}
    </div>
  );
};

用户交互：让历史栩栩如生

为了让我们的数据概览更加引人入胜，我们可以添加一些用户交互功能，例如悬停显示历史人物的简介：

const Timeline = ({ name, birthDate, deathDate }) => {
  const [showInfo, setShowInfo] = useState(false);

  return (
    <div onMouseEnter={() => setShowInfo(true)} onMouseLeave={() => setShowInfo(false)}>
      {showInfo && <div>{name} ({birthDate} - {deathDate})</div>}
    </div>
  );
};

收尾工作：将历史呈现给世界

最后，让我们将所有组件组合起来，呈现我们令人惊叹的 React + TypeScript 数据概览：

const App = () => {
  const [historicalFigures, setHistoricalFigures] = useState<HistoricalFigure[]>([]);

  return (
    <div>
      <Timelines />
    </div>
  );
};

export default App;