入门客AI创业平台(我带你入门,你带我飞行)
博文笔记

reactjs 里map的使用

创建时间:2016-07-30 投稿人: 浏览次数:169

类似 

<option>北京</option>

<option>上海</option>

.....

<option>西藏</option>

这样的代码复制了很多次,被人批评了。。。 后来在react里找到了更好的解决办法,核心就是把数据层和 view 层隔开,复用。


 解决方法:

var province_map = [
                {"code":"beijing","cn":"北京"},
                {"code":"shanghai","cn":"上海"},
                {"code":"tianjin","cn":"天津"},
                {"code":"chongqing","cn":"重庆"},
                {"code":"hebei","cn":"河北"},
                {"code":"shanxi","cn":"山西"},
                {"code":"henan","cn":"河南"},
                {"code":"liaoning","cn":"辽宁"},
                {"code":"jilin","cn":"吉林"},
                {"code":"heilongjiang","cn":"黑龙江"},
                {"code":"neimenggu","cn":"内蒙古"},
                {"code":"jiangsu","cn":"江苏"},
                {"code":"shandong","cn":"山东"},
                {"code":"anhui","cn":"安徽"},
                {"code":"zhejiang","cn":"浙江"},
                {"code":"fujian","cn":"福建"},
                {"code":"hubei","cn":"湖北"},
                {"code":"hunan","cn":"湖南"},
                {"code":"guangdong","cn":"广东"},
                {"code":"guangxi","cn":"广西"},
                {"code":"jiangxi","cn":"江西"},
                {"code":"sichuan" ,"cn":"四川"},
                {"code":"hainan","cn":"海南"},
                {"code":"guizhou","cn":"贵州"},
                {"code":"yunnan","cn":"云南"},
                {"code":"xizang","cn":"西藏"},
                {"code":"shaanxi","cn":"陕西"},
                {"code":"gansu","cn":"甘肃"},
                {"code":"qinghai","cn":"青海"},
                {"code":"ningxia","cn":"宁夏"},
                {"code":"xinjiang","cn":"新疆"}
        ];

 


然后在 react 里几行代码就可以了: 

    var options = utils.province_map.map(function(data){
        return <option value={data.code} key={data.code} >{data.cn}</option>
    });


声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。