Как подключить скрипт на чистом js к react?

Question

[Flagname]

Пишу import './name.js' в реакт-компоненте -- не помогает.

Comments

[Denioo]

Экспортируйте сначала то что хотите подключить, а потом
import NAME from './name.js'
Потом обращайтесь к скрипту через его название name

[Flagname]

Denioo, а где мне обращаться к нему через название? например если надо подключить табы на js.

[Алексей]

Flagname, Там где нужно использовать табы

[Denioo]

Flagname, Пример

export class Tabs{
static function1(){}
function2(){}
}

Tabs.function1()

const func2 = new Tabs()
func2.function2()

Думаю понятно объяснил пример экспорта и импорта классов, так же почитайте кантора.

[Denioo]

Забыл отметить что если экспортируете класс таким способом, то в импорте надо брать в {ИМЯ} то что хотите импортировать. Вот статья кантора https://learn.javascript.ru/import-export

[Flagname]

Denioo, можете посмотреть, так неправильно?

let Tab = function () {
    let tabNav = document.querySelectorAll('.nav'),
        tabContent = document.querySelectorAll('.block'),
        tabName;

    tabNav.forEach(item => {
        item.addEventListener('click', selectTabNav)
    });

    function selectTabNav() {
        tabNav.forEach(item => {
            item.classList.remove('active');
        });
        this.classList.add('active');
        tabName = this.getAttribute('data-target');
        selectTabContent(tabName);
    }

    function selectTabContent(tabName) {
        tabContent.forEach(item => {
            item.classList.contains(tabName) ? item.classList.add('active') : item.classList.remove('active');
        })
    }
};

Tab();

export default Tab;

import React from "react";
import Tab from './script.js';


Tab();

const Buttons = () => {
    return (
        <div className="in-time">
            <div className="block-week-month-date">
                <button className="nav active" data-target="tab-1">неделя</button>
                <button className="nav" data-target="tab-2">месяц</button>
                <Tab />
                <button className="button-data">дата</button>
            </div>
            <Data datetime='19 марта — 23 июня'/>
            <Data datetime='24 июня — 26 июля'/>
        </div>
    )
}

ReactDOM.render(
    <Buttons />,
    document.getElementById('root')
);

[Denioo]

Flagname, Ну экспорт и импорт верный, только зачем вы вызываете функцию в скрипте который экспортируете и в скрипте который импортируете?

[Flagname]

Denioo, ну это ладно, не заметил просто
но все равно не работает
никакой ошибки, просто не срабатывает, словно его и нет

[Denioo]

Flagname, Так у вас скрипт должен отрабатываться при клике на ?
<button className="button-data">дата</button>

если так то попробуйте

<button className="button-data" onclick={Tab}>дата</button>

[Flagname]

Denioo, Спасибо вам. Долго мучился...

Answer 1

[McBernar]

Можете подключить как обычный скрипт в индексном файле.

Но если к нему нужно обращаться из компонентов, то делайте экспорт внутри этого скрипта.

Comments

[Flagname]

Обращаться к нему не надо. Как обычный скрипт в индексном файле -- это как? Подключить к index.html?

[McBernar]

Flagname, ну да. Так условная метрика, например, работает.
Смотря что вам нужно. Если работать с dom, тогда нельзя - у Реакта свой виртуальный dom.

[Flagname]

McBernar, если я подключу к html мне надо запускать index.html? Я запускаю jsx на локалхосте -- не видит скрипт, который нужен.

[McBernar]

Flagname, я не могу вам помочь, потому что понятия не имею - что должен делать ваш скрипт.
"jsx на локалхосте" - это набор слов.

Ваш скрипт, подключенный в index.html находится в скоупе объекта window. Например, чтобы обратится к методам яндекс.метрики, подключенной таким образом, нужно в реакт компоненте делать это через window.ym(), а не просто ym().

Повторюсь - что делает ваш скрипт, что вы ждете от него - знаете только вы.