Z getComponent jak przekazywać rekwizyty?

Question

Nie mogę wymyślić, jak przekazać rekwizyty do komponentu. Jest to ważne, ponieważ nie chcę pobierać danych w metodzie componentDidMount, ponieważ będzie to niewidoczne dla wyszukiwarek.

Mój kod wygląda następująco

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> 

Próbuję służyć do portfela React aplikacji, gdy użytkownik odwiedza prawidłowy adres URL jak mysite.com/thishandleisvalid ale Muszę również pobrać całą zawartość dla tej aplikacji w punkcie getComponent i przekazuj go jako właściwość. Na przykład. możesz normalnie zrobić coś takiego: <Portfolio contentItems={fetchedItems} />.

Czy to jest możliwe?

Answer 1

Jest to bardzo proste w obsłudze dzięki elementom bezpaństwowym. Wystarczy zrobić coś takiego:

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

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

powód, dla którego wyraźnie nie obsługuje tego rodzaju wzór, ponieważ jest to dość nietypowy drut rzeczy w ten sposób - w przypadku aplikacji, które muszą radzić sobie z tego typu rzeczy, to znacznie bardziej powszechne użycie haka onEnter do np zapełnij magazyn Flux, a następnie podłącz komponenty odpowiednio do odpowiednich sklepów.

Answer 2

Także, jeśli nie przeszkadza dostępu rekwizytów pod route, można przekazać rekwizyty tak:

JSX:

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

Programowo:

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

I customProp będzie dostępny pod numerem props.route.customProp

Answer 3

Zmiękczanie wygląda jak prostszy sposób (a nawet bardziej prostsze z recompose/withProps)

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

UPDATE

UWAGA: PERFORMANCE moja wersja jest tylko dosładzanie nad odpowiedzią Taion za, i, jak przypuszczam, ma te same problemy: powoduje całkowite zrestartowanie komponentu podczas zmiany trasy.

dzieje się tak z powodu przepinania komponentu ze wzmacniaczem withProps w każdej nowej lokalizacji, która generuje nowy komponent przy każdej zmianie trasy.

jako szybkie rozwiązanie postanowiłem buforować wszystkie ulepszenia w mapach słabych. w moim przypadku wygląda to na:

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