Reactjs 按属性对象分组的渲染元素

我有这样的json数组：

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

我将呈现如下元素：
区域1- 要素1 元素2

区域2- 元素2_1

区域3- 元素3

我现在已经这样做了，但现在我不知道如何为物业“面积”分组

this.state.areas.map（函数（el，键）{
返回(
{el.label}
);
)}

如果将标签制作成数组，则可以按如下方式对其进行分组和渲染

var Hello=React.createClass({
componentWillMount:function（）{
此.state={
面积：[
{
地区:1,，
标签：['element 1'，'element 2']
},
{
地区:2,，
标签：['element 2_1']
},
{
地区:3,，
标签：['element 3']
}
]
};
},
render:function（）{
返回(
{this.state.area.map（函数（el，键）{
返回(

{el.label.map（函数（标签）{
返回(
{label}
)
}) }

);
}) }
)
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);
我想这对你有帮助

const myState=[{
地区:1,，
标签：“元素1”
},
{
地区:3,，
标签：“元素3”
},
{
地区:1,，
标签：“元素2”
},
{
地区:2,，
标签：“元素2_1”
}];
const ShowArea=（props）=>区域{props.Area}{props.children}
const ShowLabel=（道具）=>{
返回（{props.label}）
};
var Hello=React.createClass({
render:function（）{
const CompareByArea=（a，b）=>a.area>b.area；
const OrderList=myState.sort（CompareByArea）；
让newState={}；
OrderList.forEach（元素=>{
如果（！newState[element.area]）
newState[元素区域]=[]；
newState[element.area].push（{label:element.label}）；
});
常量键=Object.keys（newState）；
常量元素=键。映射（（键）=>
{newState[key].map（ShowLabel）}
);
返回（{Elements}）
}
});
ReactDOM.render(
，document.getElementById（'容器'）
);
您将需要根据数据构建键控结构（对象）。在渲染之前生成并排序以做出反应。你好，gino，谢谢你的回答，我会尽快尝试你的解决方案，并让你随时更新：）
this.state.areas.map(function(el, key){
        return (
          <div>
            <span><strong>{el.label}</strong></span>

          </div>

        );
)}

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