Heim  >  Artikel  >  Web-Frontend  >  Wie übergebe ich Requisiten an behandelte Komponenten im React Router?

Wie übergebe ich Requisiten an behandelte Komponenten im React Router?

Patricia Arquette
Patricia ArquetteOriginal
2024-10-24 00:02:02177Durchsuche

How to Pass Props to Handled Components in React Router?

Übergabe von Requisiten an behandelte Komponenten in React Router

In einer React.js-Anwendung, die React Router verwendet, kommt es häufig vor, dass Requisiten an behandelte Komponenten übergeben werden müssen. Um dies zu erreichen, sind einige Ansätze zu berücksichtigen:

Ein einfacher Ansatz besteht darin, die behandelte Komponente mit einer neuen Komponente zu umschließen, die die gewünschten Requisiten übernimmt und sie nach Bedarf weitergibt:

<code class="javascript">var CommentsWrapper = React.createClass({
  render: function () {
    return <Comments myprop="value" />;
  }
});</code>

Auf diese Weise können Sie CommentsWrapper als Handler für die gewünschte Route verwenden:

<code class="javascript">var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={CommentsWrapper}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);</code>

Dieser Ansatz kann jedoch unhandlich werden, wenn Sie Requisiten an mehrere behandelte Komponenten übergeben müssen. In solchen Fällen besteht ein flexiblerer Ansatz darin, die Komponenteneigenschaft in der Routenkonfiguration zu verwenden, die es Ihnen ermöglicht, Requisiten direkt an die verarbeitete Komponente zu übergeben:

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

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

Mit diesem Ansatz können Sie Requisiten direkt an übergeben die Kommentarkomponente ohne die Notwendigkeit eines Wrappers:

<code class="javascript"><Route path="comments" component={Comments}/></code>

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn