React-router - props an Handler-Komponente übergeben

Question

Ich habe die folgende Struktur für meine React.js-Anwendung mit React Router:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    return (

            Ein Header

    );
  }
});

var routes = (

);

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

Ich möchte einige Eigenschaften an das Comments-Komponente übergeben.

(normalerweise würde ich das so machen )

Was ist der einfachste und richtige Weg, dies mit React Router zu tun?

Answer 1

Wenn Sie lieber keine Wrapper schreiben möchten, können Sie dies tun:

class Index extends React.Component { 

  constructor(props) {
    super(props);
  }
  render() {
    return (

        Index - {this.props.route.foo}

    );
  }
}

var routes = (

);

Answer 2

AKTUALISIERUNG

Seit dem neuen Release ist es möglich, Props direkt über das Route-Komponente zu übergeben, ohne einen Wrapper zu verwenden. Zum Beispiel, indem man den render prop verwendet.

Komponente:

class Greeting extends React.Component {
  render() {
    const {text, match: {params}} = this.props;

    const {name} = params;

    return (

        Begrüßungsseite

          {text} {name}

    );
  }
}

Verwendung:

 } />

Codesandbox Beispiel

---

ALTE VERSION

Meine bevorzugte Methode ist es, die Comments-Komponente zu umwickeln und den Wrapper als Routen-Handler zu übergeben.

Hier ist Ihr Beispiel mit den angewendeten Änderungen:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var CommentsWrapper = React.createClass({
  render: function () {
    return (

    );
  }
});

var Index = React.createClass({
  render: function () {
    return (

        Einige Header

    );
  }
});

var routes = (

);

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

Answer 3

Kopieren aus den Kommentaren von ciantic in der akzeptierten Antwort:

 ()}/>

Dies ist meiner Meinung nach die eleganteste Lösung. Es funktioniert. Hat mir geholfen.

Answer 4

Dies ist die Lösung von Rajesh, ohne das störende vom Benutzer yuji kommentiert und aktualisiert für React Router 4.

Der Code würde so aussehen:

 }/>

Beachten Sie, dass ich render anstelle von component verwende. Der Grund ist, unerwünschtes erneutes Rendern zu vermeiden. Ich übergebe auch die props an diese Methode und verwende die gleichen Props im Comments-Komponent mit dem Objekt-Spread-Operator (ES7-Vorschlag).

Answer 5

Nur ein Follow-up zur Antwort von ColCh. Es ist ziemlich einfach, das Umschließen einer Komponente abstrakt zu gestalten:

var React = require('react');

var wrapComponent = function(Component, props) {
  return React.createClass({
    render: function() {
      return React.createElement(Component, props);
    }
  });
};

Ich habe diese Lösung noch nicht getestet, daher ist jedes Feedback wichtig.

Es ist wichtig zu beachten, dass mit dieser Methode alle über den Router gesendeten props (wie params) überschrieben / entfernt werden.