Как преобразовать className в response-typescript в массив

Скажем, у меня есть компонент с единственной ссылкой на стили, хорошо работает

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 на массив, чтобы иметь возможность принимать нужный формат?


reactjs typescript react-typescript
person swoopy    schedule 19.11.2019    source источник
comment
Для ясности: response className prop принимает в качестве входных данных только строку, любое переданное ей значение другого типа будет неявно преобразовано в строку путем вызова String(value). После преобразования массив из ['foo', 'bar'] будет "foo,bar". Итак, во-первых, это ваше ожидаемое поведение?   -  person hackape    schedule 19.11.2019
comment
@hackape Нет? Я хотел, чтобы className мог принимать несколько наборов значений.   -  person swoopy    schedule 19.11.2019

Ответы (4)


arrow_upward
3
arrow_downward

Тип className - String, и вы передаете тип Array<String>

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

Что не назначается.

Поэтому либо вам нужно превратить этот массив в строку с помощью join() или concatenation, либо использовать библиотеку имен классов

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

использование библиотеки классов

import * as classnames from 'classnames'
className={classnames(styles.myStyle, styles.myOtherStyle)}
person Sunil Kashyap    schedule 19.11.2019

arrow_upward
0
arrow_downward

className компонента React принимает значение только типа string. Поскольку [styles.myStyle, styles.myOtherStyle] является значением Array<string>, вы получили ошибку проверки типа. Вы можете преобразовать arry в строку, используя join самостоятельно или используя classnames, как показано ниже, чтобы получить больше возможностей:

<div className={classnames([styles.myStyle, styles.myOtherStyle])} />
person upon.gao    schedule 19.11.2019
comment
проверим, а пока буду использовать обратные кавычки, спасибо! - person swoopy; 19.11.2019

arrow_upward
0
arrow_downward

Можно использовать имена классов:

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(" ")
person ferhat    schedule 19.11.2019

arrow_upward

arrow_downward

person    schedule
comment
это точно работает, но это беспорядочно, есть ли способ объявить тип от строки к массиву? - person swoopy; 19.11.2019
comment
я думаю, обратные кавычки чище - person swoopy; 19.11.2019
comment
там написано, что моя репутация ниже 15, поэтому это не публично просматривается, но было записано. Они сказали. - person swoopy; 19.11.2019