ReactJs数据/组件结构

Question

I am working on a reactjs application. I am looking to structure components. is the following correct architecture?

data{
"loft" :{},
"asking-price" :{}
}

class Factory{      
    static GetComponent(component){
        switch(component) {
            case "loft":
                return "<LoftComponent data='component'>";
                break;
            case "asking-price":
                return "<AskingpriceComponent data='component'>";
                break;
        }
    }

    //main render
    for(var i data){
        React.createElement(Factory.GetComponent(data[i]))
    }    
}

---

this is the latest attempt - but its not rendering -- is the mapping wrong? is the case-switch wrong?

 var config = [{ "craft-breweries": { "count": 5, "latest": "The Wimbledon Brewery Company Limited", "data": [{ "title": "Belleville Brewing Company", "start": 2013 }, { "title": "Kew Brewery", "start": 2015 }, { "title": "Laines Brewery (Four Thieves)", "start": 2015 }, { "title": "Sultan Brewery", "start": 2015 }, { "title": "The Wimbledon Brewery Company Limited", "start": 2015 }] }, "farmer-markets": { "count": 5 } }]; var MultipleComponents = React.createClass({ getComponent: function(config) { console.log("config", config); switch (config) { case 'craft-breweries': return <CraftBreweries /> case 'farmer-markets': return <FarmerMarket /> } }, render: function () { var config = this.props.config; return ( <div> {config.map((chartConfig, index) => { return ( <div key={index} className={'holder' + index}> {this.getComponent(chartConfig)} </div> ) })} </div> ); } }); var CraftBreweries = React.createClass({ componentDidMount: function () { var $this = $(ReactDOM.findDOMNode(this)); console.log("rendered div now engage d3"); // set el height and width etc. }, render: function () { return ( <div className="craftbreweries" data-role="craftbreweries"> You have {this.props.count} number of breweries in your area. The latest one is {this.props.latest}. </div> ); } }); var FarmerMarket = React.createClass({ componentDidMount: function () { var $this = $(ReactDOM.findDOMNode(this)); console.log("rendered div now engage d3"); // set el height and width etc. }, render: function () { return ( <div className="farmermarket" data-role="farmermarket"> You have {this.props.count} number of farmer markets in your area. </div> ); } }); ReactDOM.render( <MultipleComponents config={config} />, document.getElementById('root') ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script> <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script> <div id="root"></div> 

---

Answer 1

I managed to get 1 component rendering by doing this-- but why isn't the case switch working -- why isn't the map looping through and rendering through the keys?

getComponent: function(config) {
        console.log("config", config);
       // switch (config) {
           // case 'craft-breweries':
                //return <CraftBreweries  />
           // case 'farmer-markets':
                //return <FarmerMarket />
        //}


        //const { props } = config;
        return React.createElement(CraftBreweries, config["craft-breweries"]);
    },

Answer 2

I have it working at least with this setup.

--- I am going to try and loop through the config[0] object and see if this can create the holders in the MulitpleComponents render.

var config = [{
  "craft-breweries": {
    "count": 5,
    "latest": "The Wimbledon Brewery Company Limited",
    "data": [{
      "title": "Belleville Brewing Company",
      "start": 2013
    }, {
      "title": "Kew Brewery",
      "start": 2015
    }, {
      "title": "Laines Brewery (Four Thieves)",
      "start": 2015
    }, {
      "title": "Sultan Brewery",
      "start": 2015
    }, {
      "title": "The Wimbledon Brewery Company Limited",
      "start": 2015
    }]
  },
  "farmer-markets": {
    "count": 5
  }
 }];



var MultipleComponents = React.createClass({
    render: function () {
       var config = this.props.config;

       return (
            <div className="apps">
              <CraftBreweries config={config[0]["craft-breweries"]} />
              <FarmerMarket config={config[0]["farmer-markets"]} />
            </div>
        );
    }
});



var CraftBreweries = React.createClass({
    componentDidMount: function () {
        //var $this = $(ReactDOM.findDOMNode(this));
        console.log("rendered div now engage d3");
        // set el height and width etc.
    },
    render: function () {
        var props = this.props.config; 
        return (
            <div className="craftbreweries" data-role="craftbreweries">
                You have {props.count} number of breweries in your area. The latest one is {props.latest}.
            </div>
        );
    }
});

var FarmerMarket = React.createClass({
    componentDidMount: function () {
        //var $this = $(ReactDOM.findDOMNode(this));
        console.log("rendered div now engage d3");
        // set el height and width etc.
    },
    render: function () {
        var props = this.props.config; 
        return (
            <div className="farmermarket" data-role="farmermarket">
                You have {props.count} number of farmer markets in your area.
            </div>
        );
    }
});


ReactDOM.render(
    <MultipleComponents config={config} />,
    document.getElementById('root')
);