Javascript - switch case - reactjsのバグ？

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をループしますが、スイッチのケースはループのキーを満たすように見えますか？場合と同様に

： "famers-市場"

満足の "農民市場" と "パイ市場"？それはスイッチのケースがハイフンを好きではないからですか？

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

あなたは 'ブレーク' の文が欠落しています。 switch-caseはif-else機能ではなく、ブレークまたは終了を検出するまで続きます。あなたの例として、それは「農家市場」に入り、壊滅的な声明がないので、「パイ市場」にもつながるでしょう。あなたのスイッチのケースは、次のようになります。

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