Reactjs typescript中组件中的额外可选类名

我使用类名向React组件添加许多类。在我的按钮中，我希望有机会向组件添加一个类。如果我愿意，它应该是可选的

但我得到了一个类型错误，请参阅附件中的图片

我怎样才能消除这个错误

按钮代码

从“classnames”导入类名；
从“/button.module.css”导入样式；
界面按钮按钮{
子元素：JSX.Element；
onClick:（）=>void；
小？：布尔值；
类名？：字符串；
}
功能按钮（{onClick，children，small，className}:ButtonProps）{
返回(
{儿童}
);
}
导出默认按钮；

错误是：

---

计算出的属性名称必须是“string”、“number”、“symbol”或“any”类型。ts（2464）

您的

类名

用作属性名称，即使它可能未定义。请注意，可选的

字符串

实际上是

字符串|未定义的

。我将使用对象扩展来实现条件化

classnames函数的新参数：

{
  [styles.small]: small,
  ...(typeof className === 'string' ?
    { [className]: true } :
    {}
  )
}

---

您正在使用

将其强制转换为布尔值。为什么？因为
className
prop是可选的，所以它的类型是
string | undefined
，这与对象属性名的类型冲突。将
className
设置为强制，或将代码更改为仅在实际定义属性时添加属性。如果未定义
className
，则最终将得到一个对象属性，如
{“undefined”：false}
，其中计算属性名
undefined
已强制为字符串。TypeScript编译器假定这是一个错误。如果您希望发生这种情况（不太可能），您应该执行
[String（className）]：！！类名]
。如果你不希望这种情况发生（很可能），你应该做一些类似于有条件的传播的事情。谢谢，这正是我想要的：）
{
  [styles.small]: small,
  ...(typeof className === 'string' ?
    { [className]: true } :
    {}
  )
}