मैं अपने पहले रिएक्ट प्रोजेक्ट पर काम कर रहा हूं। मुझे जेएस के साथ कुछ हिस्सों को स्टाइल करने की ज़रूरत है क्योंकि मैं सामग्री पर निर्भर हूं। मैं JQuery के $(document).ready() पर घटकों componentDidMount() से JS फ़ंक्शन को कॉल कर रहा हूं क्योंकि अन्यथा इसे शैली के लिए नोड्स नहीं मिलेंगे।

जब मैं पृष्ठ में प्रवेश करता हूं या योजना के अनुसार स्टाइलिंग कार्यों को रीफ्रेश करता हूं, लेकिन जब मैं राउटर के <Link> या <NavLink> का उपयोग करता हूं तो जेएस लोड नहीं होगा।

क्या इसे काम करने का कोई तरीका है?

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')}/>
0
Gabriel Roda Eugen Bach 24 अगस्त 2018, 19:09

2 जवाब

शैली के लिए jQuery का उपयोग क्यों करें? JQuery का उपयोग बिल्कुल क्यों करें? style={{}} विशेषता का उपयोग करके बस अपनी शैलियों को उपयुक्त तत्व में पास करें, जैसे:

<ul className="page__content__career" style={{ marginLeft: '100px' }}>
  ...
</ul>
1
Alex Dovzhanyn 24 अगस्त 2018, 19:14
मुझे तत्वों के माध्यम से लूप करना है और प्रत्येक को एक इंडेक्स के आधार पर स्टाइल देना है। मैं आदत से बाहर jQuery का उपयोग कर रहा हूं, मैं इससे छुटकारा पा सकता हूं लेकिन मुझे वैसे भी एक फ़ंक्शन की आवश्यकता है
 – 
Gabriel Roda Eugen Bach
24 अगस्त 2018, 19:18

ठीक है, मैंने इसका पता लगा लिया। यह वास्तव में काफी सरल है। जैसा कि @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';
  }

}

मुझे कुछ संदर्भ संबंधी परेशानियाँ थीं, जिसने मुझे और भ्रमित कर दिया, यह इतना कठिन नहीं है

0
Gabriel Roda Eugen Bach 25 अगस्त 2018, 13:15