रिएक्ट राउटर का उपयोग करके हैंडलर घटकों को प्रॉप्स पास करना

रिएक्ट.जेएस अनुप्रयोगों में जो रिएक्ट राउटर का लाभ उठाते हैं, आपको ऐसे परिदृश्यों का सामना करना पड़ सकता है जहां आपको विशिष्ट हैंडलर घटकों को प्रॉप्स पास करने की आवश्यकता होती है . निम्नलिखित एप्लिकेशन संरचना पर विचार करें:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    return (
        

            
Some header

    );
  }
});

var routes = (
  
);

ReactRouter.run(routes, function (Handler) {
  React.render(, document.body);
});

टिप्पणियाँ घटक में प्रॉप्स पास करने के लिए, आप आमतौर पर जैसे सिंटैक्स का उपयोग करते हैं। हालाँकि, यह दृष्टिकोण रिएक्ट राउटर के साथ असंगत है, जो उम्मीद करता है कि हैंडलर घटक शुद्ध फ़ंक्शन या क्लास घटक होंगे।

एक समाधान एक रैपर घटक बनाना है जो हैंडलर घटक और पास-इन प्रॉप्स दोनों को समाहित करता है:

// CommentWrapper
var CommentWrapper = React.createClass({
  render: function () {
    return ;
  }
});

var routes = (
  
);

वैकल्पिक रूप से, आप मूल मार्ग पर पारित प्रॉप्स तक पहुंचने के लिए क्लास घटकों और this.props.route ऑब्जेक्ट का लाभ उठा सकते हैं:

class Index extends React.Component { 

  constructor(props) {
    super(props);
  }
  render() {
    return (
      

        Index - {this.props.route.foo}
      
    );
  }
}

var routes = (
  
);

foo प्रोप को / रूट पर सेट करके, आप बाद में this.props.route का उपयोग करके इंडेक्स घटक के भीतर प्रोप तक पहुंच सकते हैं।