Übergeben von Requisiten an Handler-Komponenten mithilfe von React Router

In React.js-Anwendungen, die React Router nutzen, kann es vorkommen, dass Sie Requisiten an bestimmte Handler-Komponenten übergeben müssen . Betrachten Sie die folgende Anwendungsstruktur:

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

Um Requisiten an die Comments-Komponente zu übergeben, verwenden Sie normalerweise eine Syntax wie . Dieser Ansatz ist jedoch nicht mit React Router kompatibel, der erwartet, dass Handler-Komponenten reine Funktionen oder Klassenkomponenten sind.

Eine Lösung besteht darin, eine Wrapper-Komponente zu erstellen, die sowohl die Handler-Komponente als auch die übergebenen Requisiten kapselt:

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

var routes = (
  
);

Alternativ können Sie Klassenkomponenten und das Objekt this.props.route nutzen, um auf Requisiten zuzugreifen, die an die übergeordnete Route übergeben werden:

class Index extends React.Component { 

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

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

var routes = (
  
);

Durch Setzen der foo-Requisite auf der /-Route können Sie später in der Indexkomponente mit this.props.route auf die Requisite zugreifen.