打字稿 - 反应没有重载匹配这个调用

问题描述

1. 我正在尝试使用 Nivo 实现 Choropleth（世界地图） 图书馆'。

2. 我使用 Typescript-React，当我添加图例时，我是 得到一个错误。我可能不擅长打字稿，这很容易，但我无法解决这个问题

3. 如果我改成'.jsx' 问题解决了，但我是 在反应项目中使用打字稿。我的错误是这样的：

---

(JSX attribute) legends: {
    anchor: string;
    direction: string;
    justify: boolean;
    translateX: number;
    translateY: number;
    itemsspacing: number;
    itemWidth: number;
    itemHeight: number;
    itemDirection: string;
    itemTextColor: string;
    itemOpacity: number;
    symbolSize: number;
    effects: {
        ...;
    }[];
}[]
No overload matches this call.
  Overload 1 of 2,'(props: ChoroplethProps | Readonly<ChoroplethProps>): ResponsiveChoropleth',gave the following error.
    Type '{ data: { id: string; value: number; }[]; features: ({ type: string; properties: { name: string; }; geometry: { type: string; coordinates: number[][][]; }; id: string; } | { type: string; properties: { name: string; }; geometry: { ...; }; id: string; })[]; ... 12 more ...; legends: { ...; }[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicclassAttributes<ResponsiveChoropleth> & Readonly<ChoroplethProps> & Readonly<...>'.
      Property 'legends' does not exist on type 'IntrinsicAttributes & IntrinsicclassAttributes<ResponsiveChoropleth> & Readonly<ChoroplethProps> & Readonly<...>'.
  Overload 2 of 2,'(props: ChoroplethProps,context: any): ResponsiveChoropleth',gave the following error.
    Type '{ data: { id: string; value: number; }[]; features: ({ type: string; properties: { name: string; }; geometry: { type: string; coordinates: number[][][]; }; id: string; } | { type: string; properties: { name: string; }; geometry: { ...; }; id: string; })[]; ... 12 more ...; legends: { ...; }[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicclassAttributes<ResponsiveChoropleth> & Readonly<ChoroplethProps> & Readonly<...>'.
      Property 'legends' does not exist on type 'IntrinsicAttributes & IntrinsicclassAttributes<ResponsiveChoropleth> & Readonly<ChoroplethProps> & Readonly<...>'.

我的代码在这里：

import mapData from './datas/mapData';
import countries from './datas/world_countries.json';

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
const MyResponsiveChoropleth = () => (
  <ResponsiveChoropleth
    data={mapData}
    features={countries.features}
    margin={{ top: 0,right: 0,bottom: 0,left: 0 }}
    colors='reds'
    domain={[0,1000000]}
    unkNownColor='#666666'
    label='properties.name'
    valueFormat='.2s'
    projectionTranslation={[0.5,0.5]}
    projectionRotation={[0,0]}
    enableGraticule={true}
    graticuleLineColor='#dddddd'
    borderWidth={0.5}
    borderColor='#152538'
    legends={[
      {
        anchor: 'bottom-left',direction: 'column',justify: true,translateX: 80,translateY: -57,itemsspacing: 1,itemWidth: 85,itemHeight: 18,itemDirection: 'left-to-right',itemTextColor: '#444444',itemOpacity: 0.85,symbolSize: 16,effects: [
          {
            on: 'hover',style: {
              itemTextColor: '#000000',itemOpacity: 1,},],]}
  />
);



export default MyResponsiveChoropleth;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）