javascript - Pasando props a rutas Reaccionar niños enrutadores

coffeescript reactjs

Question

Tengo problemas para solucionar un problema con el enrutador de reacción. El escenario es que necesito pasarles a los niños un conjunto de accesorios de un componente y ruta principal del estado.
lo que me gustaría hacer es pasar a childRouteA su propsA , y pasar childRouteB its propsB . Sin embargo, la única manera en que puedo descubrir cómo hacer esto es pasarle a RouteHandler tanto propsA como propsB que significa que cada ruta de niño hace que cada niño propile independientemente de si es relevante. esto no es un problema de bloqueo en este momento, pero puedo ver un momento en el que usaría los dos del mismo componente, lo que significa que las teclas en propA serán sobrescritas por las teclas con las teclas 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()

Esto realmente funciona de la manera en que lo espero. Cuando me enlace a /filters/time obtengo el componente Child2 prestado. Cuando voy a /filters/price obtengo el componente Child1 prestado. el problema es que al hacer este proceso, Child1 y Child2 son pasados allProps() a pesar de que solo necesitan accesorios de precio y tiempo, respectivamente. Esto puede convertirse en un problema si esos dos componentes tienen un nombre de apoyo idéntico y, en general, no es una buena práctica para hinchar los componentes con accesorios innecesarios (ya que hay más de 2 niños en mi caso real).
RouteHandler , en resumen , ¿hay alguna manera de pasar RouteHandler timeProps cuando voy a la ruta del tiempo ( filters/time ) y solo paso priceProps a RouteHandler cuando voy a la ruta del precio ( filters/price ) y evito pasar todos los accesorios a todos rutas de niños?

Answer 1

En componente de niño, insted de

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

Puede fusionar accesorios con el padre

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

Answer 2

Me encontré con un problema similar y descubrí que puede acceder a los accesorios establecidos en la Route través de this.props.route en su componente de ruta. Sabiendo esto, organicé mis componentes así:

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

Esto está usando react-router v1.0-beta3. ¡Espero que esto ayude!

Bien, ahora que estoy entendiendo mejor tu problema, esto es lo que podrías intentar.

Debido a que los accesorios de su hijo proceden de un padre soltero, su componente principal, no el enrutador de reacción, debe ser el que maneja el niño que se renderiza para que pueda controlar qué atrezzo se pasa.

Puede intentar cambiar su ruta para usar un parámetro, luego inspeccionar ese parámetro en su componente principal para representar el componente secundario apropiado.

Ruta

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

Componente principal

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

Answer 3

React.cloneElement se puede utilizar para representar el componente secundario y para pasar cualquier dato disponible dentro del componente de ruta hijo que se define en la ruta.

Por ejemplo, aquí estoy pasando el valor del usuario al componente reaccionar childRoute.

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