React 開發(fā)問題積累

• • 1. 修改antd的組件樣式
  • 2. antd級聯(lián)選擇框（后臺數(shù)據(jù)渲染）

1. 修改antd的組件樣式

問題：直接修改樣式好像不起作用，直接在組件上加style行內樣式也不生效
方案：用 :global樣式穿透

全局樣式直接使用

:global{.antd-list{...} }

局部修改樣式可以在組件外層的容器加上類名

.box{:global{.antd-list{...}} }

2. antd級聯(lián)選擇框（后臺數(shù)據(jù)渲染）

問題：將后臺返回的數(shù)據(jù)構造成組件需要的樣子
方案：遞歸數(shù)據(jù)

fieldNames自定義字段名

<Cascaderoptions={this.cmdbNodeList}onChange={this.onChange} fieldNames={{ label: 'name', value: 'name', children: 'children' }}/>

二級級聯(lián)選擇：

const classGradesData = [];singleClassList &&singleClassList.forEach(item => {const children = [];//這里是生成children的數(shù)據(jù)結構item.classList.forEach(classListItem => {children.push({value: classListItem.classId,label: classListItem.className,});});const newClassData = {value: item.gradeName,label: item.gradeName,children,};return classGradesData.push(newClassData); });

二級以上級聯(lián)選擇：

get dataList() {return this.cloneDeep(this.data.children); // this.data.children后臺數(shù)據(jù) }cloneDeep = (tree) => {return tree ? tree.map(item => {return {value: item.id,label: item.name,children: this.cloneDeep(item.children)}}) : []; }

總結

以上是生活随笔為你收集整理的React 项目开发问题积累的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。