تمرير الدعائم إلى مكونات المعالج باستخدام React Router

في تطبيقات React.js التي تستفيد من React Router، قد تواجه سيناريوهات حيث تحتاج إلى تمرير الدعائم إلى مكونات معالج محددة . خذ بعين الاعتبار بنية التطبيق التالية:

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);
});

لتمرير الدعائم إلى مكون التعليقات، عادةً ما تستخدم بناء الجملة مثل . ومع ذلك، هذا الأسلوب غير متوافق مع React Router، الذي يتوقع أن تكون مكونات المعالج عبارة عن وظائف أو مكونات فئة خالصة.

أحد الحلول هو إنشاء مكون مجمّع يغلف كلاً من مكون المعالج والدعائم التي تم تمريرها:

// 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.