react根据json格式数据动态增加dom

2024年5月10日 149次阅读 来源: l2xBrain

通常在js中增加元素是怎么做的呢？
用document.getElementById(“. . .”) 获得DOM元素后，然后用appendChild()实现函数添加

那么在react中添加元素是否也要采取这样的方式呢？当然不是那样的。

废话不多说.

这里调用组件LeftPanel

<LeftPanel content={[{"title":"工程研发部门","item":"Mac 开发工程师","checked":"false","number":9},
                     {"title":"工程研发部门","item":"iOS App 测试工程师","checked":"false","number":17},
                     {"title":"工程研发部门","item":"Android 远程控制工程师","checked":"false","number":61},
                     {"title":"工程研发部门","item":"Web 前端工程师","checked":"false","number":31},
                     {"title":"工程研发部门","item":"Android 多媒体软件开发工程师","checked":"false","number":2},
                     {"title":"产品设计部门","item":"网页设计师","checked":"false","number":47},
                     {"title":"产品设计部门","item":"ID/工业设计师","checked":"false","number":39},
                     {"title":"产品设计部门","item":"视觉设计师/GUI界面设计师","checked":"false","number":42},
                     {"title":"产品设计部门","item":"平面设计师","checked":"false","number":8}
                    ]}/>

以上是我定义的一个组件LeftPanel, 属性content是一个数组.

          {/*存放标题*/}
          var titles = [];
          {/*类别归类对象*/}
          var itemsSort = {};

          this.props.content.forEach(function(items){
            {/*判断对象是否存在*/}
            if(!itemsSort[items.title]){
              titles.push(items.title);
              itemsSort[items.title] = [];
              itemsSort[items.title].push(items);

            }else{
              itemsSort[items.title].push(items);
            }

          });

          var chooseNode = titles.map(function(title){
            return (
              <SelectionTitle content={title} item={itemsSort
} checked={this.state.checked}/>
            )
          }.bind(this));

以上的代码在定义了chooseNode的一个组件，这就是核心的内容了，首先是map()函数的特性，那就是它可以有返回值，使得自定义的组件或者DOM标签添加到(注意这里不是替代，而是添加)变量chooseNode。其次注意的map是用于遍历数组,这里还有一个重要的一点是，每一个返回的组件要有key值，之所以这样是因为这样的性能更优，当然即使没有key值也是可以完成的，但是建议用key值。这个时候choose就可以被赋值为DOM元素了

OK,完成之后你可以在render(){}中的return中这样写{chooseNode}，实例代码如下

return (
        <div id="leftPanel" ref="leftPanel" style={styles.wrapBackground}>
          <div>
            <div style={styles.wrap}>
              <span style={styles.title}>招聘职位</span>
              <button style={styles.button} onClick={this.handleClick}>清空</button>
            </div>
            {chooseNode}
          </div>
        </div>
      );

下面是全部的代码的地址：
https://github.com/Luciahelloworld/LeftChooseMission

    原文作者：l2xBrain
    原文地址: https://segmentfault.com/a/1190000004189415
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞