Использование в JS классов заданных в React | Пример — {s.fistItem}?

Question

[Jake_Hold]

Всем привет) Изучаю React и столкнулся с проблемой, при использовании модульности css файлов в компоненте возникают проблемы при обращении в JS к нужному классу. Вся проблема заключается в том, что класс я задаю {s.logo} и в браузере получаю уже вот сгенерированный класс Header_logo__3IwlL
Есть вариант помимо класса задавать ID, в целом как бы да, но в этой ситуации мне этот кусок кода нужно еще использовать в другой компоненте и выйдет что два одинаковых ID.
в JS ко всем остальным элементам применял этот способ :

$('#logo').click( () => {
    // code
  })

/* код компоненты */

import { NavLink } from "react-router-dom";
import React from 'react'

import SettingList from './SettingList';  // дополнительная компонента выпадающего списка
import s from './scss/Header.module.scss' // подключение модуля scss
import theme from '../scripts/theme.js' // собственно сам файл JS в котором я пытаюсь взять класс 


const Header = (props) => {
  return (
      <header>
        <nav className = {s.navBar}>
        <div className = {s.logo} id = 'logo'>
          <div className = {s.img}></div>    
        </div>
        <div className={s.fistItem} id = 'list'>
          <NavLink to="/list" activeClassName = {s.active}>List</NavLink>
            <div className={s.activeLine} id='line'></div>
        </div>
        <div className={s.fistItem} id = 'new'>
          <NavLink to="/new" activeClassName = {s.active}>Add person</NavLink>
        </div>

        {/* Работа с выпадающим списком и иконкой */}
        <div className={s.more}>
          <div className={s.icon} id = 'more'></div>
        </div>
        <div id = 'setList'>
          <SettingList />
        </div>
        <div className={s.hr} id = 'hr'></div>
      </nav>
    </header>
  )
}

export default Header;

Уже не первый день мучаюсь с этим моментом, поэтому буду очень благодарен за помощь.

Answer 1

[Антон Спирин]

при использовании модульности css файлов в компоненте возникают проблемы при обращении в JS к нужному классу.

Забудьте подобные подходы в React разработке. Удалите из проекта JQuery и учитесь работать с состоянием.

Пример:

class Example extends React.Component {
  state = {
    shouldShowMenu: false,
  };
  
  handleToggleMenuClick = () => {
    this.setState(state => ({
      shouldShowMenu: !state.shouldShowMenu,
    }));
  };
  
  render() {
    const { shouldShowMenu } = this.state;
 
    return (
      <div>
         <button onClick={this.handleToggleMenuClick}>Toggle menu</button>
         {shouldShowMenu && <Menu />}
      </div>
    );
  }
}

Answer 2

[m_frost]

если очень надо както пометить ноду делайте через ref
но такие кейсы очень редко возникают если делать все декларативно.