मैं चर के रूप में पारित प्रतिक्रिया घटक में गुण कैसे जोड़ सकता हूं?

Question

मेरा परिदृश्य यह है कि मैं एक लेआउट निर्दिष्ट करने के विकल्प के साथ विचार प्रस्तुत करने के लिए एक नियंत्रक (प्रतिक्रिया से संबंधित नहीं) में एक रेंडर() फ़ंक्शन बना रहा हूं। इस तरह से मेरे पास कई अलग-अलग लेआउट घटक हो सकते हैं, सभी सामग्री गुण स्वीकार करते हैं, जिन्हें सरल तरीके से प्रस्तुत किया जा सकता है। यहां मैं संक्षेप में क्या करने की कोशिश कर रहा हूं:

render: function(content, layout) { 
    layout = layout || <Layout />; 
    layout.setProps({ content: content }); 
    React.render(layout, document.body); 
} 

क्या यह किया जा सकता है? या अगर आपको लगता है कि यह किया जा सकता है लेकिन यह एक बुरा विचार है, तो कृपया मुझे बताएं क्यों।

Answer 1

कुछ तरीकों से आप इस तक पहुंच सकते हैं।

function render(content, layoutType, layoutProperties) { 
    layoutType = layoutType || Layout; 
    layoutProperties = layoutProperties || {}; 

    var props = { content: content }; 
    for (var key in layoutProperties) { 
    props[key] = layoutProperties[key]; 
    } 

    var layout = React.createElement(layoutType, props); 

    React.render(layout, document.body); 
} 

render(<div>Test 1</div>); 
render(<div>Test 2</div>, CustomLayout, { title: "Test Title" }); 

^{JSFiddle example: http://jsfiddle.net/BinaryMuse/hjLufbkz/}

आप एक पूरी तरह से महसूस किया ReactElement बजाय लेआउट के रूप में, आप इस्तेमाल कर सकते हैं पास करना चाहते हैं

सरल लेआउट के प्रकार और गुण अलग से पारित करने के लिए है React.addons.cloneWithProps (या, v0.13 आरसी 2 और बाद में, React.cloneElement):

function render(content, layout) { 
    var props = { content: content }; 
    layout = layout || <Layout />; 
    layout = React.addons.cloneWithProps(layout, props); 

    React.render(layout, document.body); 
} 

render(<div>Test 1</div>); 
render(<div>Test 2</div>, <CustomLayout title="Test Title" />); 

^{JSFiddle example: http://jsfiddle.net/BinaryMuse/8krawhx4/}

---

मैं घोंसला तत्वों को this.props.children का उपयोग कर के एक बड़े प्रशंसक हूँ, ध्यान दें कि आप दोनों तकनीक से ऊपर ऐसा करने के लिए संशोधित कर सकते हैं:

function render(content, layoutType, layoutProperties) { 
    layoutType = layoutType || Layout; 
    layoutProperties = layoutProperties || {}; 

    var layout = React.createElement(layoutType, layoutProperties, content); 

    React.render(layout, document.body); 
} 

^{JSFiddle example: http://jsfiddle.net/BinaryMuse/6g8uyfp4/}

और

function render(content, layout) { 
    layout = layout || <Layout>{content}</Layout>; 
    layout = React.addons.cloneWithProps(layout, {children: content}); 

    React.render(layout, document.body); 
} 

^{JSFiddle example: http://jsfiddle.net/BinaryMuse/nadv297h/}

बेशक

, अगर आपके सी में से एक ustom लेआउट घटक पहले से ही this.props.children अन्य प्रयोजनों के लिए उपयोग करते हैं, cloneWithProps/cloneElement और this.props.content के साथ मूल तकनीक ठीक काम करती है। (JSFiddle example: http://jsfiddle.net/BinaryMuse/b5ncfnqh/)