Wie übergebe ich Requisiten an die Handler-Komponente im React Router?

Übergabe von Requisiten an die Handler-Komponente in React Router

In React.js-Anwendungen, die React Router verwenden, kann es Fälle geben, in denen bestimmte Eigenschaften übergeben werden zu untergeordneten Komponenten ist erforderlich. Betrachten Sie beispielsweise die folgende Struktur:

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

Das Ziel besteht darin, Eigenschaften an die Kommentarkomponente zu übergeben. Normalerweise könnte dies direkt in der Komponentendeklaration erfolgen. Bei React Router ist jedoch ein alternativer Ansatz erforderlich.

Eine Möglichkeit besteht darin, eine Wrapper-Komponente zu verwenden. Dazu müsste eine separate Komponente erstellt werden, die die Comments-Komponente umschließt und die gewünschten Requisiten übergibt. Hier ist ein Beispiel:

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

// Then in the routes definition:

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

Ein anderer Ansatz, ohne Wrapper-Komponenten zu verwenden, besteht darin, die Indexkomponente zu ändern:

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

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