Mit getComponent wie Requisiten übergeben?

Question

Ich kann nicht herausfinden, wie Requisiten, um die Komponente zu übergeben. Dies ist wichtig, da ich keine Daten in der componentDidMount-Methode abrufen möchte, da sie für Suchmaschinen nicht sichtbar sind.

Mein Code sieht wie folgt aus

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> 

Ich versuche, ein Portfolio zu servieren App reagieren, wenn der Benutzer eine gültige URL wie mysite.com/thishandleisvalid besucht, aber ich werde müssen auch für diese App alle Inhalte holen am getComponent Punkt und übergeben Sie es als eine Eigenschaft. Z.B. Sie könnten normalerweise so etwas tun <Portfolio contentItems={fetchedItems} />.

dies möglich ist, zu tun?

Answer 1

Das ist wirklich einfach, mit staatenlos Komponenten zu tun. Tun Sie einfach so etwas wie:

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

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

Der Grund, warum wir nicht ausdrücklich diese Art von Muster unterstützen, weil es ziemlich untypisch ist die Dinge so verdrahten - für Anwendungen, die mit dieser Art der Sache befassen müssen, ist es viel Häufiger, den onEnter Haken zu verwenden, um z befüllen Sie einen Flux-Speicher, und verbinden Sie dann die Komponenten entsprechend mit den relevanten Geschäften.

Answer 2

Auch wenn Sie nichts dagegen haben, Requisiten unter route zugreifen, können Sie Requisiten wie dies passieren:

JSX:

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

Programatically:

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

Und customProp wird überverfügbar sein

Answer 3

currying sieht als eine einfachere Art und Weise (und noch einfacher mit Neuzusammenstellung/withProps)

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

UPDATE

ACHTUNG: PERFORMANCE meine Version ist nur ein sugaring über Taion Antwort, und, ich nehme an, hat die gleichen Probleme: Es verursacht komplette Komponente rerender auf Rerouting.

es geschieht, weil die Komponente mit withProps Enhancer an jedem neuen Ort Umpackzentrums, die auf jedem Rerouting neue Komponente erzeugt.

als eine schnelle Lösung habe ich beschlossen, alle enhancings in weakmaps zwischenzuspeichern. in meinem Fall sieht es aus wie

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