Question

我的数据json看起来像这样。

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
  },
  "pie-markets": {
    "count": 8
  }
 }];

- 如果密钥存在，我正试图动态附加组件。

因此调用了一个名为getLayers的函数。它循环通过json - 但是switch case似乎满足了循环的键？

喜欢案例：“famers-markets”

满足“农民市场”和“馅饼市场”？是因为开关盒不喜欢炒作吗？

getLayers: function(data){
      var items = [];
      var j = 0;
      for (var layer in data) {
          console.log("layer------->", layer);

          switch (layer) {
            case 'craft-breweries':
              console.log("craft-breweries");
              items.push(<CraftBreweries key={j} config={config[0]["craft-breweries"]} />);
            case 'farmer-markets':
              console.log("farmer-markets");
              items.push(<FarmerMarket key={j} config={config[0]["farmer-markets"]} />);
            case 'pie-markets':
              console.log("pie-markets");
              items.push(<PieMarket key={j} config={config[0]["pie-markets"]} />);  
          }

          console.log("j", j);
          j++;

      }

      console.log("items", items);
      return items;      
    }

全文

import React from 'react';
import ReactDOM from 'react-dom';
//import App from './App';
import './index.css';



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
  },
  "pie-markets": {
    "count": 8
  }
 }];


var MultipleComponents = React.createClass({


    getLayers: function(data){
      var items = [];
      var j = 0;
      for (var layer in data) {
          console.log("layer------->", layer);

          switch (layer) {
            case 'craft-breweries':
              console.log("craftbreweries");
              items.push(<CraftBreweries key={j} config={config[0]["craft-breweries"]} />);
            case 'farmer-markets':
              console.log("farmermarkets");
              items.push(<FarmerMarket key={j} config={config[0]["farmer-markets"]} />);
            case 'pie-markets':
              console.log("piemarkets");
              items.push(<PieMarket key={j} config={config[0]["pie-markets"]} />);
            default: 

          }

          console.log("j", j);
          j++;

      }

      console.log("items", items);
      return items;      
    },


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

       console.log("config", config);

       return (
            <div className="apps">
                {this.getLayers(config[0])}
            </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>
        );
    }
});


var PieMarket = 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="piemarket" data-role="piemarket">
                You have {props.count} number of pie markets in your area.
            </div>
        );
    }
});


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

Answer 1

你错过了＆＃39;休息＆＃39;声明。 switch-case不是if-else功能，它会一直持续到发现中断或结束。至于你的例子，它将进入农民市场＆＃39;并且由于没有中断声明，它将继续与“馅饼市场”相关联。同样。您的开关案例应为：

getLayers: function(data){
  var items = [];
  var j = 0;
  for (var layer in data) {
      console.log("layer------->", layer);

      switch (layer) {
        case 'craft-breweries':
          console.log("craft-breweries");
          items.push(<CraftBreweries key={j} config={config[0]["craft-breweries"]} />);
          break;
        case 'farmer-markets':
          console.log("farmer-markets");
          items.push(<FarmerMarket key={j} config={config[0]["farmer-markets"]} />);
          break;
        case 'pie-markets':
          console.log("pie-markets");
          items.push(<PieMarket key={j} config={config[0]["pie-markets"]} />);  
          break;
        default:
          console.log("no matches found for layer:", layer);
          break;

      }

      console.log("j", j);
      j++;

  }

  console.log("items", items);
  return items;      
}

Javascript - 切换案例 - reactjs bug？

1 个答案: