Как вставить JS-скрипт в React класс?

Question

[konstantinst13]

Мне нужно вставить js-скрипт в классовый компонент Реакта и сделать так, чтобы скрипт запускался только в тот момент, когда этот компонент уже смонтирован и физически есть в ДОМе. Как мне это сделать?
Благодарю за внимание.

Comments

[Buck]

Только сегодня с этим столкнулся.

Даже простой элементарный скрипт для проверки не возвращает все кнопки.
а только первые которые есть в навигации, а все остальные он не видит и тоже не знаю что делать.

document.addEventListener('DOMContentLoaded', () => {
	const allButton = document.querySelectorAll('button');
	console.log(allButton);
});

[konstantinst13]

Buck, у меня такая же ситуация. Нужно через JS взять кнопки из Компонента, который изначально отсутствует на странице. А скрипт загружается сразу, возвращает null и отключается :(

[Buck]

konstantinst13, Ну будем надеется что помогут

проблема будет еще при роутинге, так как после отрисовки надо будет получить обновленные кнопки

[Иван В]

Buck, а зачем в React работать с DOM напрямую? Какая цель?

[konstantinst13]

Иван В, а есть возможность это делать по-другому?

[Иван В]

konstantinst13,

Нужно через JS взять кнопки из Компонента, который изначально отсутствует на странице

а что ты хочешь сделать с полученными кнопками?

[Buck]

Иван В, это просто как пример.

Мне надо взять все элементы с определенным дата атрибутом и повесить на них параллакс.

На обычной вёрстке + js все работает отлично (даже не задумывался). Решил сделать на реакте и понял что ничего не приходит.

[Иван В]

Buck, ну так вешайте во время рендеринга компонента (без конкретного кода, подробнее не рассказать)
Если все же нужно обратиться к элементу DOM, почитайте про ref.

[Buck]

Можно пример плиз?

Вот так это выглядит в обычном JS

const scene = document.querySelectorAll('[data-prl]');
scene.forEach((item) => {
		const parallax = new Parallax(item);
	});

и все работает

Вот компонент react. Мне надо взять все div с .parallax или по атрибуту data-prl и выполнить простой скрипт (который сверху)

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

const IndexHeader = () => (
	<>
		<header>
			<div className="parallax bg-lt float-start" data-prl>
			<div className="parallax bg-lt float-end" data-prl>
		</header>
	</>
);

export default IndexHeader;

Answer 1

[Buck]

в общем у меня получилось через класс

class MyComponent extends React.Component {

	// пробрасываем пропсы если надо
	constructor(props) {
		super(props);
		this.props = props
	}

	componentDidMount() {
		// Сюда пишем скрипты которые нужны. Можно обращаться к чему хочешь (в пределах компонента)
	}

	render() {  
		return (
		<>
			//тут твоя jsx разметка
		</>
		)
	}
}
export default MyComponent;