En passant accessoires de Réagir Routeur enfants routes

Je vais avoir de la difficulté à surmonter un problème de réagir routeur. Le scénario est que j'ai besoin de passer les enfants itinéraires d'un ensemble d'accessoires à partir d'un état du composant parent et de l'itinéraire.

ce que je voudrais faire est de passer childRouteA son propsA, et passer childRouteB son propsB. Toutefois, la seule façon dont je peux comprendre la façon de le faire est de passer RouteHandler les deux propsA et propsB ce qui signifie que chaque enfant route se chaque enfant prop indépendamment de sa pertinence. ce n'est pas un problème de blocage pour le moment, mais je peux voir une fois quand je serais en utilisant les deux de la même composante qui signifie que les touches sur la propA sera écrasé par les touches, les touches de propB. 

# routes
routes = (
  <Route name='filter' handler={ Parent } >
    <Route name='price' handler={ Child1 } />
    <Route name='time' handler={ Child2 } />
  </Route>
)

# Parent component
render: ->
  <div>
    <RouteHandler {...@allProps()} />
  </div>

timeProps: ->
  foo: 'bar'

priceProps: ->
  baz: 'qux'

# assign = require 'object-assign'
allProps: ->
  assign {}, timeProps(), priceProps()

Cela fonctionne de la manière que je l'attendez. Lorsque je créer un lien vers /filters/time - je obtenir le Child2 composant de rendu. quand je vais à /filters/price - je obtenir le Child1 composant de rendu. le problème est qu'en faisant ce processus, Child1 et Child2 sont tous deux passé allProps() même si ils n'ont besoin que de prix et de délai d'accessoires, respectivement. Cela peut devenir un problème si ces deux éléments identiques prop nom et, en général, n'est tout simplement pas une bonne pratique pour gonfler les composants avec des accessoires inutiles (comme il y a plus de 2 enfants dans mon cas).

donc en résumé, est-il un moyen de passer le RouteHandler timeProps quand je vais sur le temps de trajet (filters/time) et passez uniquement priceProps à RouteHandler quand je vais sur le prix de la route (filters/price) et pour éviter de passer tous les accessoires pour tous les enfants des routes?

InformationsquelleAutor PhilVarg | 2015-08-06
  1. 29

    J'ai rencontré un problème similaire et a découvert que vous pouvez accéder à des accessoires fixés sur le Route par this.props.route dans votre itinéraire composant. Sachant cela, j'ai organisé mes composants comme ceci:

    index.js

    React.render((
  <Router history={new HashHistory()}>
    <Route component={App}>
        <Route
          path="/hello"
          name="hello"
          component={views.HelloView}
          fruits={['orange', 'banana', 'grape']}
        />
    </Route>
  </Router>
), document.getElementById('app'));

    App.js

    class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>{this.props.children}</div>;
  }
}

    HelloView.js

    class HelloView extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>
      <ul>
        {this.props.route.fruits.map(fruit => 
          <li key={fruit}>{fruit}</li>
        )}
      </ul>
    </div>;
  }
}

    C'est à l'aide de réagir-routeur v1.0-beta3. Espérons que cette aide!

    Ok, maintenant que je comprends mieux votre problème, voici ce que vous pourriez essayer.

    Comme votre enfant les accessoires sont à venir à partir d'un seul parent, votre composant parent, de ne pas réagir-routeur, devrait être celui de la gestion de laquelle l'enfant est rendu, de sorte que vous pouvez contrôler les accessoires sont passés.

    Vous pouvez essayer de modifier votre parcours pour utiliser un paramètre, puis vérifiez que le paramètre de votre parent composant de rendre l'enfant approprié du composant.

    Route

    <Route name="filter" path="filter/:name" handler={Parent} />

    Composant Parent

    render: function () {
  if (this.props.params.name === 'price') {
    return <Child1 {...this.getPriceProps()} />
  } else if (this.props.params.name === 'time') {
    return <Child2 {...this.getTimeProps()} />
  } else {
    //something else
  }
}
    • vous avez quelques codés en dur dans les fruits index.js où que mes accessoires sont à venir à partir de l'un de ses parents de l'etat. donc je ne peux pas passer quelque chose à la route à partir de index.js
    • J'ai mis à jour ma réponse, maintenant que je suis à la compréhension de votre problème. j'espère que ça aide
    • je déteste vraiment comment c'est comment réagir routeur doit être utilisé, mais c'est la réponse assez bien suis-moi sur le droit chemin. j'ai utilisé this.context.router.getCurrentParams (cus je ne suis pas à l'aide de la version beta 1.0) et a ensuite fait un objet carte pour passer les accessoires, j'ai besoin pour le gestionnaire d'itinéraire. à partir de là, j'ai utilisé une instruction switch pour obtenir le bon enfant.
    • Qu'en est les accessoires nécessaires à l'enfant composant est une partie de l'état du composant parent non seulement à de nouvelles données comme fruits tableau ci-dessus? Depuis dans <Router> l'état de la société mère App n'est pas dans le champ d'application on ne peut pas passer à d'composant dans un sous <Route>, ou toute référence à un composant enfant dans le parent de l'élément est {this.props.children} et pas <aComponent data={présent.état.soemPoriton} />` on ne peut pas passer à travers la syntaxe de l'expression {this.props.children}. Quelle est la prise;?
    InformationsquelleAutor Jim Skerritt
  2. 11

    En composant enfant, place de 

    return <div>{this.props.children}</div>

    Vous pouvez fusionner des accessoires avec les parents

    var childrenWithProps = React.cloneElement(this.props.children, this.props);
return <div>{childrenWithProps}</div>
    InformationsquelleAutor Alex Shwarc
  3. 0

    Réagir.cloneElement peut être utilisé pour rendre l'enfant du composant et donc de transmettre toutes les données qui est disponible à l'intérieur de l'enfant itinéraire composant qui est défini dans la route.

    Par exemple, ici, je suis passant la valeur de l'utilisateur à réagir childRoute composant.

    {React.cloneElement(this.props.childRoute, { user: this.props.user })}
    InformationsquelleAutor Paritosh Pundir