Come posso aggiungere proprietà a un componente di reazione passato come variabile?

Question

Il mio scenario è che sto creando una funzione render() in un controller (non correlato a React) per il rendering di viste con l'opzione di specificare un layout. In questo modo posso avere più componenti di layout diversi, tutti che accettano una proprietà content, che può essere renderizzata in modo semplice. Ecco cosa sto cercando di fare in poche parole:

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

Si può fare? O se pensi che possa essere fatto ma è una cattiva idea, per favore fammi sapere perché.

Answer 1

Ci sono un paio di modi in cui è possibile avvicinarsi a questo.

Il più semplice è di passare il tipo e le proprietà del layout di parte:

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/}

Se si vuole passare un interamente realizzato ReactElement come il layout, invece, è possibile utilizzare React.addons.cloneWithProps (oppure, in v0.13 RC2 e versioni successive, 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/}

---

Sono un grande fan di utilizzare this.props.children agli elementi nido; notare che è possibile modificare sia le tecniche sopra per farlo:

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/}

e

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/}

Naturalmente, se uno dei tuoi c componenti di layout ustom utilizza già this.props.children per altri scopi, la tecnica originale con cloneWithProps/cloneElement e this.props.content funziona bene. (JSFiddle example: http://jsfiddle.net/BinaryMuse/b5ncfnqh/)