07/09/2015 Development / java script

Hi guys.

I am development a system in my company, using component in components in loop.

I have a idea of using REACT and i development this script.

var obj = [{
    type : 'Carrousel',
    effect : 'fade',
    items : [{
        type : 'Product',
        productId: '121212121'
    },{
        type : 'Image',
        imgP: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150'
    },{
        type : 'Image',
        imgP: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150'
    },{
        type : 'Image',
        imgP: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150'
    },{
        type : 'Image',
        imgP: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150'
    },{
        type : 'Image',
        imgP: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150'
    }]
}];

var MyComponents = React.createClass({
    render: function() {
        var components = obj.map(function(component){
        var module = window[component.type]
            return (React.createElement(module, {items: component.items}));            
        });

        return (

{components}

);
    }
});

 


var Carrousel = React.createClass({
    render: function() {

        var components = this.props.items.map(function(component){
        var module = window[component.type]
        var instance = React.createElement(module, {properties: component})
            return (

  • {instance}
  • );            
            });

     

            return (

    • {components}
    );
        }
    });

     

    var Product = React.createClass({
        render: function() {
            return (

    Produto: {this.props.properties.productId}

    );
        }
    });

     

    var Image = React.createClass({
        render: function() {
            return ();
        }
    });

    React.render(, document.getElementById('container'));

    this is a jsfiddle

  • https://jsfiddle.net/69z2wepo/15430/