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

【问题标题】：How to fix type warning for radius settings in React app如何修复 React 应用程序中半径设置的类型警告
【发布时间】：2021-05-15 14:29:51
【问题描述】：

我有一个使用 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, 30, 0]} />;  
}

它是从一个反应组件内部调用的，如下所示：

<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, 30, 30, 0]'}、radius={'0 30 30 0'}等会破坏代码（无舍入效果）。

【问题讨论】：

Cell 来自哪里？类型可能是错误的，但不清楚它们是否是您编写的类型。
Cell 是一个 recharts 组件，用于在堆叠条中呈现块。你说的对。的“半径”与的“半径”不同，它只取一个值而不是四个。所以不知何故使用错误的设置会得到想要的结果，但使用正确的设置不会。

标签： reactjs typescript visual-studio-code recharts

【解决方案1】：

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

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

这两项更改应如下所示：

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

【讨论】：

我将更改代码以在而不是中设置半径，但您的解决方案效果很好。谢谢。