如何修复 React 应用程序中半径设置的类型警告

如何解决如何修复 React 应用程序中半径设置的类型警告

我有一个使用 recharts 绘制条形图的 React 应用程序。我使用一个函数来检查数据并决定是否对单元格的角进行圆角处理。如下所示：

function customizedCell(this: { column: number; color: string },entry,index,array) {     
  // Logic to determine which corners to round.
  return <Cell key={index} fill={this.color} radius={[0,30,0]} />;  
}

它是从 react 组件内部调用的，如下所示：

<Bar dataKey="mykey" stackId="1">
  {this.data.map(customizedCell,{ column: 3,color: '#AABBCC' })}
</Bar>

一切正常，但是当我使用 npm 运行应用程序时，半径值数组中的每个数字都会出现如下警告：

TS2322: Type 'number' is not assignable to type 'string'.

如何避免此警告？ radius={'[0,0]'}、radius={'0 30 30 0'} 等会破坏代码（无舍入效果）。

解决方法

要解决您的类型问题，您可以首先将每个值从数字转换为字符串，方法是将它们放在引号中：30 => '30'。

但是，之后会在 radius 属性上出现类型错误。要解决此问题，您可以将其类型转换为 unknown，然后再次转换为 string 以删除类型警告。

两个更改应如下所示：

return <Cell key={index} fill={this.color} radius={['0','30','0'] as unknown as string} />;