Wie übergebe ich Requisiten an Handlerkomponenten im React Router?

Übergabe 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:

<code class="javascript">var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    return (
        <div>
            <header>Some header</header>
            <RouteHandler />
        </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

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

Um Requisiten an die Kommentarkomponente 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:

<code class="javascript">// CommentWrapper
var CommentWrapper = React.createClass({
  render: function () {
    return <Comments {...this.props} />;
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={CommentWrapper} myprop="value"/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);</code>

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

<code class="javascript">class Index extends React.Component { 

  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>
        Index - {this.props.route.foo}
      </h1>
    );
  }
}

var routes = (
  <Route path="/" foo="bar" component={Index}/>
);</code>

Indem Sie die foo-Requisite auf der /-Route setzen , können Sie später in der Indexkomponente über this.props.route.

auf die Requisite zugreifen

Das obige ist der detaillierte Inhalt vonWie übergebe ich Requisiten an Handlerkomponenten im React Router?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!