react根據json格式資料動態增加dom

l2xBrain發表於2015-12-23
ReactJSON

通常在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[title]} 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

相關文章