react拖拽添加新組件

標籤：使用   更新   圖表   ons   char   資料   就會   lis   charts   

1.因為對react架構思想還不是很熟，遇到問題習慣通過js解決。

2.這次拖拽添加新組件，js通過dom操作，直接在網頁中某個元素上append一個元素就可以了，但是react顯然不能這麼做，例如，動態添加一個自訂群組件或者圖表。

3.解決方案：定義一個數組this.state={chartList:[]}，確定拖拽某種類型組件後，在數組中添加一個組件(?)。更新群組件，最後通過render輸出

4.該方法遇到一個問題，當你直接在數組中添加一個組件

const newLine=<ReachartsSimpleLineChart/>

const listline=this.state.chartList.push(newLine);

this.setState({

　　chartList:listline

})

這種方法會出錯，只有在首次添加成功，後面再添加就會失敗，this,setState不會更新

5.解決方案使用immutability-helper

const listline=update(chartList,{$push:[newLine]});

this.setState({

　　chartList:listline

})

這樣添加才會成功。

原理：不可變資料

react拖拽添加新組件