渲染由屬性對象分組元件reactjs

Question

我有JSON數組像這樣：

{ 
    area:1, 
    label: "element1" 
}, 
{ 
    area:3, 
    label: "element3" 
}, 
{ 
    area:1, 
    label: "element2" 
}, 
{ 
    area:2, 
    label: "element2_1" 
} 

我會使等的元件：
區域1 - 元素1 element2的

區2- element2_1

區域3 - 元素3

我已經做到了這一點，現在，但現在我不知道如何爲財產「區域」

this.state.areas.map(function(el, key){ 
     return (
      <div> 
      <span><strong>{el.label}</strong></span> 

      </div> 

     ); 
)} 

Answer 1

組如果你讓你的標籤到一個數組，你可以組，並將其呈現這樣。

var Hello = React.createClass({ 
 
    componentWillMount: function() { 
 
     this.state = { 
 
      area: [ 
 
       { 
 
        area: 1, 
 
        label: ['element 1', 'element 2'] 
 
       }, 
 
       { 
 
        area: 2, 
 
        label: ['element 2_1'] 
 
       }, 
 
       { 
 
        area: 3, 
 
        label: ['element 3'] 
 
       } 
 
      ] 
 
     }; 
 
    }, 
 
    render: function() { 
 
     return (
 
      <div> 
 
       { this.state.area.map(function(el, key) { 
 
        return (
 
         <div key={el.area}> 
 
          <span> 
 
           <strong> 
 
           { el.label.map(function(label) { 
 
            return (
 
             <span key={label}>{label}</span> 
 
            ) 
 
           }) } 
 
           </strong> 
 
          </span> 
 
         </div> 
 
        ); 
 
       }) } 
 
      </div> 
 
     ) 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <Hello /> , 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"></div>

Answer 2

我想這可以幫助你https://jsfiddle.net/69z2wepo/69759/

const myState = [{ 
     area:1, 
     label: "element1" 
    }, 
    { 
     area:3, 
     label: "element3" 
    }, 
    { 
     area:1, 
     label: "element2" 
    }, 
    { 
     area:2, 
     label: "element2_1" 
    }]; 

    const ShowArea = (props) => <div><strong>Area {props.area}</strong><span>{props.children}</span></div> 

    const ShowLabel = (props) =>{ 
     return(<span style={{paddingLeft:'10px'}} key={props.label}><strong>{props.label}</strong></span>) 
    }; 


    var Hello = React.createClass({ 

     render: function() { 
      const CompareByArea = (a,b) => a.area > b.area; 
      const OrderList = myState.sort(CompareByArea); 
      let newState = {}; 
      OrderList.forEach(element=>{ 
       if(!newState[element.area]) 
       newState[element.area] = []; 
       newState[element.area].push({label: element.label}); 
      }); 

     const keys = Object.keys(newState); 
     const Elements = keys.map((key) => <ShowArea key={key} area={key} > 
     {newState[key].map(ShowLabel)} 
     </ShowArea>); 

     return (<div>{Elements}</div>) 
     } 
    }); 

    ReactDOM.render(
     <Hello/>,document.getElementById('container') 
    );