Question

我正在研究reactjs应用程序。我期待结构组件。是以下正确的架构？

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]))
    }    
}

这是最新的尝试 - 但它没有渲染 - 映射是错误的吗？案例转换是错误的吗？

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

我设法通过这样做获得了1个组件渲染 - 但是为什么案例开关没有工作 - 为什么地图不循环并通过键渲染？

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

我至少使用此设置。

---我将尝试遍历config [0]对象，看看是否可以在MulitpleComponents渲染中创建持有者。

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')
);

ReactJs数据/组件结构

2 个答案: