getComponent प्रोप पास करने के तरीके के साथ?

Question

मैं यह नहीं समझ सकता कि घटक को प्रोप कैसे पास किया जाए। यह महत्वपूर्ण है क्योंकि मैं घटकडिडमाउंट विधि में डेटा नहीं लेना चाहता क्योंकि यह खोज इंजन के लिए अदृश्य होगा।

मेरे कोड इस

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> 

तरह लग रहा है मैं एक पोर्टफोलियो को सर्व करने की अनुप्रयोग प्रतिक्रिया जब उपयोगकर्ता mysite.com/thishandleisvalid की तरह कोई मान्य url का दौरा कोशिश कर रहा हूँ लेकिन मैं यह भी है कि ऐप की सभी सामग्री लाने की आवश्यकता होगी getComponent बिंदु पर और इसे एक संपत्ति के रूप में पास करें। जैसे आप आमतौर पर ऐसा कुछ कर सकते हैं जैसे <Portfolio contentItems={fetchedItems} />।

क्या यह संभव है?

Answer 1

यह स्टेटलेस घटकों के साथ वास्तव में करना आसान है। वैसे ही जैसे कुछ करना:

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

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

कारण है कि हम स्पष्ट रूप से पैटर्न की इस तरह का समर्थन नहीं करते है, क्योंकि यह इस तरह से चीजों को तार की काफी असामान्य है - बात की इस तरह से निपटने की जरूरत है कि क्षुधा के लिए, यह बहुत है उदाहरण के लिए onEnter हुक का उपयोग करने के लिए अधिक आम है फ्लक्स स्टोर को पॉप्युलेट करें, फिर प्रासंगिक स्टोर्स के लिए उपयुक्त घटकों को कनेक्ट करें।

Answer 2

इसके अलावा, अगर आप route तहत रंगमंच की सामग्री तक पहुँचने कोई आपत्ति नहीं है, तो आप इस तरह रंगमंच की सामग्री पारित कर सकते हैं:

JSX:

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

प्रोग्राम के :

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

और customPropके माध्यम से उपलब्ध होगा

Answer 3

currying एक सरल तरीके के रूप में लग रहा है (और संयोजित साथ और भी अधिक सरल/withProps)

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

अद्यतन

चेतावनी: निष्पादन मेरी संस्करण सिर्फ Taion के जवाब पर एक sugaring है, और, मुझे लगता है, एक ही परेशानी है: यह rerouting पर पूर्ण घटक rerender का कारण बनता है।

यह प्रत्येक नए स्थान पर प्रोपोजर के साथ घटक को दोबारा बनाने के कारण होता है, जो प्रत्येक रीरउटिंग पर नया घटक उत्पन्न करता है।

एक त्वरित समाधान के रूप में मैंने कमजोरियों में सभी वृद्धि को कैश करने का फैसला किया। मेरे मामले में यह

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