如何将 react-typescript className 制作成数组

Question

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

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

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

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

Typescript 抛出一个 error 说：

The expected type comes from property 'className' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly<{ children?: ReactNode; }>'

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

Answer 1

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

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

Answer 2

React 组件的

className 只接受 string 类型的值。由于 [styles.myStyle, styles.myOtherStyle] 是 Array<string> 的值，你得到了类型检查 error.You 可以自己使用 join 将 arry 转换为字符串，或者使用 classnames 如下获得更多功能：

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

Answer 3

classnames 可以利用：

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

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

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

npm i -D @types/classnames

这增加了另一个依赖项，如果不是绝对需要，最好避免。亚历克斯的答案（模板字符串或您的包装器）应该是默认值。

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

Answer 4

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

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

不可分配。

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

[styles.myStyle, styles.myOtherStyle].join(' ')
{styles.myStyle + ' ' + styles.myOtherStyle}
</code>${styles.myStyle}<code>${styles.myOtherStyle}

使用类名库

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

如何将 react-typescript className 制作成数组

How to make react-typescript className to array

typescript

reactjs

react-typescript