组件的JavaScript在使用React路由器进行路由时不执行
我正在做我的第一个项目。我需要用JS设计一些部分的样式,因为我依赖于内容。我从JQuery的$document.ready上的components componentDidMount调用JS函数,因为否则它找不到要设置样式的节点 当我进入页面或刷新时,样式会按计划工作,但当我使用路由器或JS时,不会加载 有办法让它工作吗组件的JavaScript在使用React路由器进行路由时不执行,javascript,jquery,reactjs,react-router,components,Javascript,Jquery,Reactjs,React Router,Components,我正在做我的第一个项目。我需要用JS设计一些部分的样式,因为我依赖于内容。我从JQuery的$document.ready上的components componentDidMount调用JS函数,因为否则它找不到要设置样式的节点 当我进入页面或刷新时,样式会按计划工作,但当我使用路由器或JS时,不会加载 有办法让它工作吗 class About extends React.Component { constructor() { super(); } componentDid
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.log('Entered About')}/>
为什么要使用jQuery来创建样式?为什么要使用jQuery?只需使用style={{}}属性将样式传递到适当的元素,如下所示:
<ul className="page__content__career" style={{ marginLeft: '100px' }}>
...
</ul>
好的,我发现了。其实很简单。正如@Alex Dovzhanin所建议的,我去掉了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是出于习惯,我可以摆脱它,但无论如何我需要一个函数