Я работаю над своим первым проектом на React. Мне нужно стилизовать некоторые части с помощью JS, потому что я зависим от контента. Я вызываю JS-функцию из компонентов componentDidMount() на JQuery $(document).ready(), потому что иначе она не найдет узлы для стилизации.
Когда я захожу на страницу или обновляю, стиль работает, как и планировалось, но когда я использую маршрутизатор <Link> или <NavLink>, JS не загружается.
Есть ли способ заставить это работать?
class About extends React.Component {
constructor() {
super();
}
componentDidMount() {
$(document).ready( function () {
indentation($('.page__content__career').children(), 85);
indentation($('.page__about .page__content__text').children(), 100);
});
}
render() {
return (
<div className = "page page__about">
<div className = "page__content page__about__content">
<h1>about</h1>
<hr />
<div className = "page__content__photo">
<img src = {'../images/profile-picture-square--dark.jpg'} />
</div>
<div className = "page__content__text">
<p>Hello, World</p>
</div>
<ul className = "page__content__career">
{
cvList.map( (job) => {
return (
<CVElement
startTime = {job.startTime}
endTime = {job.endTime}
description = {job.description}
place = {job.place}
link = {job.link}
/>
)
})
}
</ul>
</div>
</div>
);
}
}
export default About;
Еще пробовал вызывать уважаемые функции при входе, что не сработало
<Route path = "/en/about" component = {About} onEnter = {() => console.info('Entered About')}/>



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Зачем использовать jQuery для стилизации? Зачем вообще использовать jQuery? Просто передайте свои стили в соответствующий элемент с помощью атрибута style = {{}}, например:
<ul className = "page__content__career" style = {{ marginLeft: '100px' }}>
...
</ul>
Хорошо, я узнал об этом. На самом деле это довольно просто. Как предположил @Alex Dovzhanyn, я избавился от jQuery, но затем использовал объекты стиля DOM.
componentDidMount() {
const pageAboutChildren = document.querySelector('.page__about .page__content__text').childNodes;
const pageAboutCareer = document.querySelector('.page__content__career').childNodes;
indentation(pageAboutChildren, 100);
indentation(pageAboutCareer, 85);
changeColor();
}
с отступом ():
const indentation = (element, indent) => {
for(var i = 0; i < element.length; i++) {
element[i].style.marginLeft = indent * (i+1) + 'px';
}
}
У меня были проблемы со ссылками, которые еще больше сбили меня с толку в конце концов, это не так уж и сложно
Мне нужно перебрать элементы и дать каждому стиль на основе индекса. Я использую jQuery по привычке, я мог бы избавиться от него, но мне все равно нужна функция