Wie kann ich Requisiten an Handlerkomponenten im React Router übergeben?

Übergabe von Requisiten an Handler-Komponenten in React Router

In React Router ist die Übergabe von Requisiten an Handler-Komponenten eine häufige Anforderung. Betrachten Sie die folgende Struktur:

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

Requisiten direkt weitergeben

Traditionell würden Sie Requisiten wie folgt direkt an die Kommentarkomponente übergeben:

<Comments myprop="value" />

Übergabe von Requisiten über React Router

In React Router müssen Requisiten jedoch über die Komponenten-Requisite der Route weitergeleitet werden. Dafür gibt es zwei Möglichkeiten:

1. Verwenden einer Wrapper-Komponente

Erstellen Sie eine Wrapper-Komponente, die die Handler-Komponente umschließt:

var RoutedComments = React.createClass({
  render: function () {
    return <Comments {...this.props} myprop="value" />;
  }
});

Verwenden Sie dann die RoutedComments-Komponente anstelle der Comments-Komponente in der Route:

<Route path="comments" handler={RoutedComments}/>

2. Verwenden von Klassenkomponenten mit Routeneigenschaften

Definieren Sie eine Klassenkomponente, die von React.Component ausgeht, und verwenden Sie die Komponentenstütze:

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

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