Установка строки className динамически Javascript \ React - PullRequest
Новая
       4

Установка строки className динамически Javascript \ React

2 голосов
/ 01 марта 2020

В моем текущем проекте я настраиваю поддержку для мобильных устройств следующим образом:

1) Я создаю все соответствующие компоненты как для настольных компьютеров, так и для мобильных устройств. На большинстве моих страниц они одинаковые.

2) Я создаю два файла .s css, один для настольного компьютера и один для мобильного (определяется по медиа-запросу, охватывающему весь файл)

3) Затем я присоединяю оба стиля в className моих компонентов, и тогда устанавливается только соответствующий файл. Выглядит это так: 

// Styles
import styles from '../../components/Timeline/timeline.scss';
import mobileStyles from '../../components/Timeline/mobileTimeline.scss';

// Example component
<Row className={`${styles.container} ${mobileStyles.container}`}>
   <div className={`${styles.myComponent} ${mobileStyles.myComponent}`}/>
</Row>

Отлично работает, но чтобы сделать код чище, я решил написать вспомогательную функцию для генерации всей строки для className -> 

const setStyle = styleName => `${styles.styleName} ${mobileStyles.styleName}`

Однако setStyle всегда возвращает «неопознанный» (* функция определена после импорта стилей, конечно)

Я думаю, я понимаю, почему это происходит, но мне интересно, есть ли способ, которым мы может динамически получить доступ к таким свойствам объекта стиля?

Заранее спасибо!

1 Ответ

3 голосов
/ 01 марта 2020

Чтобы получить свойство от объекта, которому дано имя ключа в переменной, используйте скобочную нотацию : 

const setStyle = styleName => `${styles[styleName]} ${mobileStyles[styleName]}`

Это предполагает, что доступны styles и mobileStyles в области действия функции, в противном случае вам также нужно будет передать их: 

const setStyle = (styleName, styles, mobileStyles) => `${styles[styleName]} ${mobileStyles[styleName]}`
...