Heim  >  Artikel  >  Web-Frontend  >  Wie übergebe ich Eigenschaften an Handlerkomponenten im React Router?

Wie übergebe ich Eigenschaften an Handlerkomponenten im React Router?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-23 17:29:02458Durchsuche

How to Pass Properties to Handler Components in React Router?

Übergabe von Requisiten an Handler-Komponenten in React Router

In einer React-Anwendung, die React Router nutzt, besteht die Notwendigkeit, Eigenschaften an dynamisch geladene Handler-Komponenten zu übergeben.

Berücksichtigen Sie die folgende React Router-Konfiguration:

<code class="javascript">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>
);</code>

Um Eigenschaften an die Kommentarkomponente zu übergeben, können Sie die Indexkomponente wie folgt erweitern:

<code class="javascript">class Index extends React.Component { // using babel here

  constructor(props) {
    super(props);
  }

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

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

Dieser Ansatz ermöglicht Ihnen den Zugriff die foo-Eigenschaft direkt in der Index-Komponente und übergibt sie effektiv an die Comments-Komponente.

Das obige ist der detaillierte Inhalt vonWie übergebe ich Eigenschaften an Handlerkomponenten 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