react 地图json文件 函数组件ts实现

以下是一个使用 TypeScript 实现的 React 函数组件，用于加载并显示 JSON 格式的地图数据：

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

interface MapData {
  name: string;
  width: number;
  height: number;
  tiles: number[];
}

interface MapProps {
  url: string;
}

const Map: React.FC<MapProps> = ({ url }) => {
  const [mapData, setMapData] = useState<MapData>();

  useEffect(() => {
    const fetchMapData = async () => {
      const response = await fetch(url);
      const jsonData = await response.json();
      setMapData(jsonData);
    };
    fetchMapData();
  }, [url]);

  if (!mapData) {
    return <div>Loading...</div>;
  }

  const { name, width, height, tiles } = mapData;

  return (
    <div>
      <h1>{name}</h1>
      <p>Width: {width}</p>
      <p>Height: {height}</p>
      <div>
        {tiles.map((tile, index) => (
          <span key={index}>{tile}</span>
        ))}
      </div>
    </div>
  );
};

export default Map;

这个组件接受一个 `url` 属性作为输入，并使用 `fetch` 函数异步加载该 URL 指向的 JSON 数据。组件会在加载数据时显示 "Loading..." 的文本，加载完成后将数据显示在页面上。

在这个例子中，我们定义了两个 TypeScript 接口，`MapData` 描述了地图数据的格式，`MapProps` 描述了 `Map` 组件的输入属性格式。我们还使用了 React 的 `useState` 和 `useEffect` 钩子来管理组件状态和异步加载数据。最后，我们通过条件渲染来处理数据加载的过程。