如何将 react-typescript className 制作为数组答案

【问题标题】：How to make react-typescript className to array如何将 react-typescript className 制作为数组
【发布时间】：2019-11-19 04:55:27
【问题描述】：

假设我有一个单一引用样式的组件，效果很好

export const something = () => {
  return (
    <div className={styles.myStyle}
  )
}:

但是说，我想有多种样式的参考，例如

export const something = () => {
  return (
    <div className={[styles.myStyle, styles.myOtherStyle]}
  )
}:

Typescript 抛出 error 说：

预期的类型来自属性“className”，它在类型“IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly'

如何将className 类型更改为数组才能接受我想要的格式？

【问题讨论】：

要清楚，react className prop 只接受字符串作为输入，传递给它的任何其他类型的值都将通过调用 String(value) 隐式转换为字符串。 ['foo', 'bar'] 的数组在转换后将是 "foo,bar"。那么首先，这是您的预期行为吗？
@hackape 没有？我希望className 能够接受多组值。

标签： reactjs typescript react-typescript

【解决方案1】：

className 的类型是 String，而您正在传递类型 Array<String>

className={[styles.myStyle, styles.myOtherStyle]}

这是不可分配的。

因此，要么您必须使用 join() 或 concatenation 将该数组转换为字符串，要么使用 classnames library

[styles.myStyle, styles.myOtherStyle].join(' ')
{styles.myStyle + ' ' + styles.myOtherStyle}
${styles.myStyle}${styles.myOtherStyle}

使用类名库

import * as classnames from 'classnames'
className={classnames(styles.myStyle, styles.myOtherStyle)}

【讨论】：

【解决方案2】：

className={[styles.myStyle, styles.myOtherStyle, "otherClass"].join(' ')}

className={`${styles.foo} ${styles.bar}`}

【讨论】：

确实可以，但是很乱，有没有办法可以将类型从字符串声明为数组？
我猜反引号更干净
它说我的代表低于 15，所以它没有被公开查看，但被记录了。他们说。

【解决方案3】：

className 的 react 组件只接受 string 类型的值。由于[styles.myStyle, styles.myOtherStyle] 是Array<string> 的值，所以会出现类型检查错误。您可以自己使用join 将arry 转换为字符串，或使用classnames 来获得更多功能：

<div className={classnames([styles.myStyle, styles.myOtherStyle])} />

【讨论】：

将检查它，同时使用反引号谢谢！

【解决方案4】：

classnames 可以被利用：

import * as classnames from 'classnames'
className={classnames(styles.foo, styles.bar)}

它支持非常不同的用例，请参阅usage。

对于打字稿，类型也可用：

npm i -D @types/classnames

这增加了另一个依赖关系，如果不是绝对需要，它可以更好地防止。 Alex 的答案（模板字符串或您的包装器）应该是默认值。

const className = (...classes) => classes.map((e) => String(e)).filter((e) => e).join(" ")

【讨论】：