una - pasar variables de un script a otro javascript

¿Cómo reacciona el enrutador para pasar parámetros a otros componentes a través de accesorios?

Question

Hasta ahora, el alcance de mi conocimiento sobre cómo se pasan las propiedades de un componente a otro a través de parámetros es el siguiente

// inicio: grado de mi conocimiento

Supongamos que existe una variable de estado llamada topic en A.jsx. Quiero pasar esto a B.jsx, así que realizo lo siguiente

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

En B.jsx puedo hacer cosas como

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

el cual, cuando se le solicite, mostrará "¡El tema de hoy es el clima!"

// fin: grado de mi conocimiento

Ahora, estoy siguiendo un tutorial sobre el enrutador de reacción con los siguientes fragmentos de código.

topic.jsx:

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

rutas.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>
})
}

donde this.state.topics es una lista de temas extraídos de la API imgur a través de Reflux.

Mi pregunta es : ¿mediante qué mecanismo se pasan los params a props para topic.jsx? En ninguna parte del código veo un idioma como se expresa en la sección anterior sobre el "alcance de mi conocimiento" a saber. no hay <Topic params = {this.state.topics} /> en route.jsx o header.jsx. Enlace al repositorio completo aquí . React-router docs dice que los parámetros están " analizados fuera del nombre de la URL original ". Esto no resonó conmigo.

Answer 1

Esa es una pregunta sobre react-router internos de react-router .

react-router es un componente React en sí mismo y utiliza props para pasar toda la información de enrutamiento a los componentes secundarios de forma recursiva. Sin embargo, ese es un detalle de implementación de react-router y entiendo que puede ser confuso, así que sigue leyendo para obtener más detalles.

La declaración de enrutamiento en su ejemplo es:

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

Básicamente, React-Router pasará por cada uno de los componentes en la declaración de enrutamiento (Main, Topic) y "pasará" las siguientes propiedades a cada uno de los componentes cuando el componente se cree utilizando el método React.createElement . Aquí están todos los accesorios pasados ​​a cada componente:

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

Los valores de props se calculan por diferentes partes de react-router usando varios mecanismos (por ejemplo, extrayendo datos de la cadena de URL usando expresiones de expresiones regulares).

El método React.createElement sí mismo permite que react-router cree un elemento y pase las propuestas anteriores. La firma del método:

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

Así que básicamente la llamada en la implementación interna se ve así:

this.createElement(components[key], props)

Lo que significa que react-router usó los accesorios definidos anteriormente para iniciar cada uno de los elementos (Main, Topic, etc.), por lo que explica cómo se puede acceder a this.props.params en los componentes de Topic sí, se pasó por react-router !