web-dev-qa-db-fra.com

Comment réagit-routeur transmet les paramètres à d'autres composants via des accessoires?

Jusqu'ici, mes connaissances sur la manière dont les propriétés sont transmises d'un composant à un autre via des paramètres sont les suivantes:

// début: étendue de mes connaissances

Supposons qu'il existe une variable d'état appelée topic dans A.jsx. Je veux transmettre ceci à B.jsx, alors je réalise ce qui suit

B = require('./B.jsx')
getInitialState: function() {return {topic: "Weather"}}
<B params = {this.state.topic}>

Dans B.jsx, je peux ensuite faire des choses comme

module.exports = React.createClass({
render: function() {
   return <div><h2>Today's topic is {this.props.params}!</h2></div>
}
})

qui, lorsqu'il sera appelé, rendra "Le sujet d'aujourd'hui est la météo!"

// fin: étendue de mes connaissances

Maintenant, je suis en train de parcourir un tutoriel sur react-router avec les extraits de code suivants

topic.jsx:

module.exports = React.createClass({
  render: function() {
    return <div><h2>I am a topic with ID {this.props.params.id}</h2></div>
    }
  })

routes.jsx:

var Topic = require('./components/topic');
module.exports = (
  <Router history={new HashHistory}>
    <Route path="/" component={Main}>
      <Route path = "topics/:id" component={Topic}></Route>
    </Route>

  </Router>
)

header.jsx:

  renderTopics: function() {
    return this.state.topics.map(function(topic) {
      return <li key = {topic.id} onClick={this.handleItemClick}>
        <Link to={"topics/" + topic.id}>{topic.name}</Link>
      </li>
    })
  }

où this.state.topics est une liste de rubriques tirées de l’API imgur via Reflux.

Ma question est : par quel mécanisme params est-il passé à props pour topic.jsx? Nulle part dans le code je ne vois un idiome tel qu’exprimé dans la section ci-dessus sur "l’étendue de mes connaissances", à savoir. il n'y a pas <Topic params = {this.state.topics} /> dans routes.jsx ou header.jsx. Lien vers le rapport complet ici . La documentation de React-router indique que params est " analysé en dehors du chemin de l'URL d'origine ". Cela n'a pas résonné avec moi.

javascriptreactjsreactjs-fluxreact-routerrefluxjs
28
thetrystero

C'est une question sur react-router internes.

react-router est un composant React et utilise lui-même props pour transmettre toutes les informations de routage aux composants enfants de manière récursive. Il s'agit toutefois d'un détail d'implémentation de react-router et je comprends que cela peut être déroutant, alors continuez pour plus de détails.

La déclaration de routage dans votre exemple est:

<Router history={new HashHistory}>
  <Route path="/" component={Main}>
    <Route path = "topics/:id" component={Topic}></Route>
  </Route>
</Router>

En résumé, React-Router parcourt chacun des composants de la déclaration de routage (Main, Topic) et "transmet" les accessoires suivants à chacun des composants lorsque le composant est créé à l'aide de la commande React.createElement méthode. Voici tous les accessoires transmis à chaque composant:

const props = {
   history,
   location,
   params,
   route,
   routeParams,
   routes
}

Les valeurs des accessoires sont calculées par différentes parties de react-router en utilisant divers mécanismes (par exemple, extraire des données de la chaîne d’URL en utilisant des expressions regex).

Le React.createElement La méthode elle-même autorise react-router pour créer un élément et passer les accessoires ci-dessus. La signature de la méthode:

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

Donc, en gros, l'appel dans l'implémentation interne ressemble à:

this.createElement(components[key], props)

Ce qui signifie que react-router a utilisé les accessoires définis ci-dessus pour initialiser chacun des éléments (Principal, Sujet, etc.), ce qui explique comment accéder à this.props.params dans les composants Topic lui-même, il a été passé par react-router!

58
Faris Zacina