react-img-mapper 不适用于 React Typescript 应用程序答案

【问题标题】：react-img-mapper doesn't work on React Typescript appreact-img-mapper 不适用于 React Typescript 应用程序
【发布时间】：2021-07-13 07:07:44
【问题描述】：

我正在使用react-img-mapper 和根据文档编写代码。

但是，地图发生错误，消息如下：

类型 'Map' 不能分配给类型 'import("--node_modules/react-img-mapper/dist/types").Map'。属性“区域”的类型不兼容。类型 'MapAreas[]' 不可分配给类型 'import("--node_modules/react-img-mapper/dist/types").MapAreas[]'。 “MapAreas”类型缺少“MapAreas”类型的以下属性：active、disabled、href、strokeColor、lineWidth

我应该怎么做才能消除这个错误？


import img from './asetts/body-img.png';
import ImageMapper from 'react-img-mapper';

type MapAreas = {
    name: string;
    shape: string;
    coords:number[];
    preFillColor: string;
    fillColor: string;
  
}

type Map = {
    name: string;
    areas: Array<MapAreas>;
}

const BodyImage: React.FC = () => {

    const AREAS_MAP :Map =  { name: "mymap", areas: [
        { name: "one", shape: "circle", coords: [55,440,57], preFillColor: "green", fillColor: "blue"  },
        { name: "two", shape: "circle", coords: [185,680,117], preFillColor: "red", fillColor: "blue"  },
    ]}
    

    return (
        <div>
           <ImageMapper src={img} map={AREAS_MAP}/>  
        </div>
    )
}

export default BodyImage

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

为什么不从react-img-mapper 导入MapAreas 、Map？

这样：

import {MapAreas, Map} from 'react-img-mapper/dist/types'

这是MapAreas 的原始react-img-mapper

export interface MapAreas {
    id?: string;
    shape: string;
    coords: []; // <== Problem from react-img-mapper
    active: boolean;
    disabled: boolean;
    href: string;
    fillColor: string;
    strokeColor: string;
    lineWidth: number;
    preFillColor: string;
}

试试下面的数据

const AREAS_MAP: MapAreas = {
    name: "mymap",
    areas: [
      {
        // name: "two",
        shape: "circle",
        // coords: [185, 680, 117],
        coords: [],
        preFillColor: "red",
        fillColor: "blue",
        active: false,
        strokeColor: "red",
        disabled: false,
        href: "href",
        lineWidth: 1
      }
    ]
  };

【讨论】：