React 之antd Tree樹形元件反顯

2021-10-10 21:36:13 字數 616 閱讀 5895

近期做專案遇到乙個需求:樹形元件後端返回的資料報含父節點和子節點,但在子節點不全被選中的時候,不能把父節點給勾選上,否則會出現父節點被勾選,裡邊未被選中的子節點也全部被選中。

經過網上搜尋,遇到乙個很好的解決方案

1、const test = ; // 定義test 存放所有子節點的陣列

2、迴圈遍歷出最深層子節點(包含所有的子節點及沒有子節點的父節點),存放在乙個陣列中

requestlist = (data) =>  else 

return null;

});return test;

};

3、將後台返回的含有父節點的陣列和第一步驟遍歷的陣列做比較,求交集

allarr:所有的樹結構

functions:後端給的要展示的父子節點

const result = [...new set(this.requestlist(allarr))].filter((item) =>

new set(eval(functions)).has(item)

);

4、 利用這個新的陣列給tree元件checkedkeys賦值

React初探之React特性

一 宣告式開發 與原生dom jquery等命令式程式設計不同 不通過指令來控制檢視變化,是面向資料的程式設計 通過控制資料,改動資料的方式控制檢視的變化,dom的部分react會幫你自動構建 二 可以與其他框架並存 reactdom.render document.getelementbyid r...

學習筆記之React

virtual dom 虛擬dom 傳統的web應用,操作dom一般是直接更新操作的,但是我們知道dom更新通常是比較昂貴的。而react為了盡可能減少對dom的操作,提供了一種不同的而又強大的方式來更新dom,代替直接的dom操作。就是virtual dom,乙個輕量級的虛擬的dom,就是reac...

React之教程總結

前言 前段時間學習了react,主要的學習資料是乙個不錯的 教程,學習的過程基本都是按部就班的學的。在學react之前,我是有jquery的基礎的,之前也簡單的了解過vue,知道類似vue這類框架和jquery是有很大的不同的。在以前,基本都是html css js 或jquery 而在vue re...