Импорт переменных React?

Question

[Сергей]

Вечер в хату! Появилась проблема, у меня есть компонент, в нём я использовал js, но для удобства некоторые функции в javascript немного изменил (сделал такую себе мини библиотеку) вот пример:

var $ = (selector) => {
  return document.querySelector(selector)
}

После чего решил вынести это всё дело в отдельный .js файл, и импортировать в React-компонент, но тут меня компилятор смело шлёт н..., с вот такой вот ошибкой Line 7: '$' is not defined no-undef. React просто не видит переменную $, хотя я всё импортировал в компонент, вот код:

import React, { Component } from 'react';

import './style.css';
import './param';

class Nav_btn extends Component { 
componentDidMount = () => {
  $('#nav-trigger').onclick = () => {
    $('#menu-navigation').classList.add('active');
    $('#menu-close').classList.add('active');
  }
}

render() {
	return (
      <div>
        <button id = 'nav-trigger'><div>Menu</div></button>
      </div>
    );
}
}
export default Nav_btn;

а в param.js лежит выше указанный код:

var $ = (selector) => {
  return document.querySelector(selector)
}

Я если честно не понимаю в чём может заключаться проблема, поэтому написал сюда, мейдэй! мейдэй!

Answer 1

[hzzzzl]

export default function (selector) {
  return document.querySelector(selector)
}

.......

import $ from './param'

только в реакте лучше на button вешать onClick, и там уже как-нибудь через состояние подставлять нужный класс при рендере

Comments

[Сергей]

К сожалению не работает:(

TypeError: _param__WEBPACK_IMPORTED_MODULE_7___default(...) is not a function

Answer 2

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

1. У вас не "React просто не видит переменную $", а выпадает исключение ESLint.

2. Модули следует экспортировать и импортировать в явном виде:

param.js

export default selector => document.querySelector(selector);

Nav_btn.js

import React, { Component } from 'react';
import $ from './param';

import './style.css';


// ...

3. Подобные подходы в React разработке не используют. Советую изучить возможности библиотеки и решать подобные задачи средствами React.

Простой пример:

const Example = () => {
  const [isActive, setIsActive] = useState(false);
  const handleClick = () => {
    setIsActive(!isActive);
  };

  return (
    <div>
      <div className={isActive ? 'active' : ''}>Example</div>
      <button onClick={handleClick}>Toggle active</button>
    </div>
  );
};

Comments

[Сергей]

Ладно, я понял, спасибо! Этот метод кстати не работает "TypeError: Illegal invocation", но я и пробовать больше не буду, эх а хотелось бы иметь подобные сокращения. Ну, пойду тогда больше узнавать про этот фреймворк

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

Сергей Бондаренко, не подумал. Зря сократил. querySelector требует явного вызова на document:

export default selector => document.querySelector(selector);

Подобные подходы нельзя использовать в React разработке.
Работайте с состоянием компонентов:

const Example = () => {
  const [isActive, setIsActive] = useState(false);
  const handleClick = () => {
    setActive(!isActive);
  };

  return (
    <div>
      <div className={isActive ? 'active' : ''}>Example</div>
      <button onClick={handleClick}>Toggle active</button>
    </div>
  );
}