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

Question

所以说我有一个单一引用样式的组件，效果很好

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

但是说，我想有多种风格的参考，比如

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

打字稿抛出一个error说：

预期的类型来自属性“className”，该属性在“IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly<{ children?: ReactNode; }>'

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

score 3 · Accepted Answer

类型className是String并且您正在传递类型Array<String>

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

这是不可分配的。

所以要么你必须使用或使用类名库将该数组join()变成concatenation一个字符串

使用类名库

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

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

可以利用类名：

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

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

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

npm i -D @types/classnames

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

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

score 0 · Accepted Answer

className反应组件只接受string类型的值。由于[styles.myStyle, styles.myOtherStyle]是的值Array<string>，因此您得到了类型检查错误。您可以自己使用将数组转换为字符串join或使用如下类名来获得更多功能：

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

4 回答 4