react-img-mapper 在 React Typescript 应用程序上不起作用

Question

我使用的是react img mapper和根据文档编写代码。

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

类型"Map"不可分配给类型"import"("--node_modules/areact img mapper/dist/types"(。地图。属性"areas"的类型不兼容。类型"MapAreas[]"不可分配给类型"import"("--node_modules/areact img mapper/dist/types"(。MapAreas[]’。类型"MapAreas"缺少类型"MapAreas"中的以下属性：活动、禁用、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

Answer 1

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

比如：

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

这是react-img-mapper的原始MapAreas

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
}
]
};