2015-11-06 11 views
5

Non riesco a capire come passare oggetti di scena al componente. Questo è importante perché non voglio recuperare i dati nel metodo componentDidMount in quanto sarà quindi invisibile ai motori di ricerca.Con getComponent come passare gli oggetti di scena?

mio codice simile a questo

const router = 
<Route path="/" component={App}> 
<IndexRoute onEnter={redirectToLogin} component={LandingPage} /> 
<Route path="panel" component={ ControlPanel }> 
    ... 
</Route> 
<Route 
    path="/:handle" 
    onEnter={maybeRedirectToHome} 
    getComponent={(location, callback)=> { 
     getSiteHandleByName(location.pathname.slice(1)) 
     .then(function(handle){ 
     if (handle){ 
      callback(null, Portfolio) 
     } else { 
      callback(null, NotFound) 
     } 
     }) 
     .catch(callback) 
    }} 
    getChildRoutes={(location, callback)=> { 
    callback(null, portfolioRoutes) 
    }} 
/> 
</Route> 

sto cercando di servire un portafoglio Reagire App quando l'utente visita un URL valido come mysite.com/thishandleisvalid ma sarò bisogno di andare a prendere anche tutti i contenuti per questo app al punto getComponent e consegnarlo come una proprietà. Per esempio. potresti normalmente fare qualcosa di simile a questo <Portfolio contentItems={fetchedItems} />.

È possibile farlo?

risposta

16

Questo è veramente facile da fare con componenti stateless. Basta fare qualcosa di simile:

function getComponent(location, callback) { 
    const Component = /* ... */; 
    const items = /* ... */; 

    callback(null, props => <Component {...props} items={items} />); 
} 

Il motivo per cui non sosteniamo esplicitamente questo tipo di modello è perché è abbastanza atipico per cablare le cose in questo modo - per le applicazioni che hanno bisogno di affrontare questo genere di cose, è molto più comune usare il gancio onEnter per es compilare un archivio Flux, quindi connettere i componenti come appropriato ai negozi pertinenti.

+0

Questo funziona benissimo grazie. E grazie per le informazioni sull'utilizzo dell'hook onEnter e del flux store. Questa è ancora un'area che trovo confusa e ho bisogno di conoscere. – Ally

+0

Funziona bene per me poiché sto provando a passare solo le azioni a un componente su una base per rotta senza inquinare i puntelli nell'applicazione, diciamo se ho usato le azioni 'React.cloneElement (this.props.children,' ': fooActions})' alla radice dell'app. – mpoplin

5

anche se non ti dispiace l'accesso ai puntelli sotto route, è possibile passare oggetti di scena in questo modo:

JSX:

<Route 
    path="route_path" 
    customProp="hello" 
    getComponent={(location, cb) => { 
    // ... 
    }} 

Programatically:

childRoutes: [ 
{ 
    path: 'route_path', 
    customProps: 'hello', 
    getComponent(location, cb) { 
    // .... 
    }, 

E customProp sarà disponibile tramite props.route.customProp

+1

Esiste qualche documentazione su questo? –

0

accattivarsi appare come un modo più semplice (e anche di più semplice con recompose/withProps)

const getComponentWithProps = (props) => 
    (location, cb) => { 
    const Component = /* ... */; 
    // ... 
    cb(null, withProps(props)(Component)) 
    } 
... 
childRoutes: [ 
    { 
    path: 'route_path', 
    getComponent: getComponentWithProps({ foo: 'bar' }), 
    } 
] 

UPDATE

ATTENZIONE: PRESTAZIONI la mia versione è solo uno zuccheraggio oltre la risposta di Taion, e, suppongo, ha gli stessi problemi: causa il reindirizzamento completo dei componenti durante il reinstradamento.

succede a causa del riavvolgimento del componente con withProps enhancer su ogni nuova posizione, che genera un nuovo componente su ogni reindirizzamento.

come soluzione rapida ho deciso di memorizzare nella cache tutti i miglioramenti nelle mappe deboli. nel mio caso sembra

const getOrAdd = (map) => 
    (value = Function.prototype) => 
    (key) => 
     map.get(key) 
     || (
      map.set(
      key, 
      value(), 
     ) 
      && map.get(key) 
     ); 

const componentsMap = new WeakMap(); 
export const getEnhancedMap = getOrAdd(componentsMap)(() => new WeakMap()); 

export const getEnhancedComponent = (
    component, 
    enhancer, 
) => { 
    const enhancedMap = getEnhancedMap(component); 
    return getOrAdd(enhancedMap)(() => enhancer(component))(enhancer); 
} 
Problemi correlati