Değişken olarak geçirilen bir tepki bileşenine özellikleri nasıl ekleyebilirim?

Question

Sunucum, bir düzen belirleme seçeneğiyle görünümleri oluşturmak için bir denetleyicide (React related değil) bir render() işlevi oluşturuyorum. Bu sayede, birden çok farklı düzen bileşenine sahip olabilirim, hepsi de bir içerik özelliğini kabul eder, basit bir şekilde işlenebilir. Özetle yapmaya çalıştığım şey şu:

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

Bu yapılabilir mi? Ya da yapılabileceğini düşünüyorsanız ama bu kötü bir fikir, lütfen nedenini bana bildirin.

Answer 1

Buna yaklaşımın birkaç yolu vardır. Eğer bir yerine düzen olarak ReactElement tamamen gerçekleştirilmiş şunu kullanabilirsiniz geçmek istiyorsanız http://jsfiddle.net/BinaryMuse/hjLufbkz/

:

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

en basit ayrı Düzenin türünü ve özelliklerini geçmektir React.addons.cloneWithProps (veya v0.13 RC2 ve sonra 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/

---

Ben yuva elemanlarına this.props.children kullanarak büyük bir hayranı değilim; Bunu yapmak yukarıdaki her iki teknikleri değiştirebilir unutmayın:

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

ve

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

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

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

, eğer senin c ustom layout bileşenleri zaten this.props.children'u diğer amaçlar için kullanır, orijinal teknik cloneWithProps/cloneElement ve this.props.content ile çalışır. (JSFiddle example: http://jsfiddle.net/BinaryMuse/b5ncfnqh/)