前言

今天來實現一個?React?的遞歸組件。具體的效果圖如下:

圖片說明

假設后端返回的數據如下：

[{ id: 1, parent_id: 0, name: '廣東省', children: [{ id: 2, parent_id: 1, name: '廣州市', children: [{ id: 3, parent_id: 2, name: '番禺區' }, { id: 4, parent_id: 2, name: '天河區' }], }, { id: 7, parent_id: 1, name: '深圳市', children: [{ id: 8, parent_id: 7, name: '南山區' }, { id: 9, parent_id: 7, name: '寶安區' }, { id: 10, parent_id: 7, name: '龍崗區' }, { id: 11, parent_id: 7, name: '龍華區' }, ], }, ], }, { id: 56, parent_id: 0, name: '廣西省', children: [{ id: 57, parent_id: 56, name: '南寧市' }, ], },]

分析

需求

?每層元素都有一個children屬性，選中這項后展示這一項所有的子菜單，首次展示或者切換時默認展示第一項子菜單?選中時高亮樣式，默認為第一項高亮

實現思路

?每一層的顯示邏輯應該是一樣的，都是渲染這一層的列表即可?對于子菜單的渲染邏輯也類似，如果當前項有?children?屬性，遞歸調用即可?高亮樣式的邏輯：?用一個路徑數組記錄好當前渲染的路徑，如果某一項的?id?在數組里，則高亮?切換父項時，重置數組中子項的?id?，這里可以用一個深度變量?dep?來控制

實現

渲染

?使用假數據來模擬，格式如上述?App.js中傳入的dep是0，后面每渲染一層依次加1即可?每一層初始渲染時默認將第一項作為高亮節點填入路徑數組中，路徑數組具體如何操作在下面

//App.jsimport menuList from './mock/menu'//......this.state = { activePath: []}//......componentDidMount() { let { id } = this.props.list[0] let { dep, activePath } = this.props if (!activePath[dep]) { this.props.changeActivePath(dep, id, this.props.list) }}render() { return ( list={menuList} dep={0} //以下兩個prop來控制高亮邏輯 activePath={this.state.activePath} changeActivePath={this.changeActivePath.bind(this)} /> )}

?此處為渲染一層的邏輯，拿到這一層的數據后循環渲染一下即可?標紅的樣式控制用上面說的路徑數組來控制

//Menu.jsrender() { let { list, dep } = this.props, renderList = list return ( className="list"> {renderList.map(item => { return <li id={item.id} onClick={this.clickItem.bind(this, item.id)} className={this.props.activePath.includes(item.id) ? 'active' : ''} key={item.id}>{item.name} })} {this.renderMore(list, dep)} )}

下面是渲染子節點的邏輯：

?先找出當前高亮的節點，要渲染它的子節點?遞歸調用我們的?Menu?組件即可，注意層級加1

renderMore(list, dep) { let moreList = [], id for (let i = 0; i < list.length; i++) { //找出當前高亮的節點 if (list[i].id == this.props.activePath[this.props.dep]) { moreList = list[i].children id = list[i].id break; } } if (Array.isArray(moreList) && moreList.length > 0) { return ( list={moreList} dep={dep + 1} activePath={this.props.activePath} changeActivePath={this.props.changeActivePath.bind(this)} /> ) }}

切換

?切換的邏輯十分簡單，將點擊的id傳入即可?下面具體來看路徑數組的處理

clickItem(id) { this.props.changeActivePath(this.props.dep, id, this.props.list)}

處理高亮邏輯

?如果是最后一層，則直接加入即可?如果不是，則將當前層點擊的節點填入數組，重新構建下面的子節點?遞歸處理下子節點，默認是采用第一項作為高亮的節點

//App.jschangeActivePath(dep, id, list) { let activePath = this.state.activePath if (!activePath[dep] || dep == activePath.length - 1) { //最后一個 添進去即可 activePath[dep] = id } else { //重新構建整個activePath數組 activePath[dep] = id let cur = [] for (let i = 0; i < list.length; i++) { let itemId = list[i].id if (itemId == id) { cur = list[i] break } } setPath(dep + 1, cur) } function setPath(dep, cur) { if (cur.children) { activePath[dep] = cur.children[0].id setPath(dep + 1, cur.children[0]) } } this.setState({ activePath })}

完整代碼

App.js

import React from 'react'import Menu from './components/Menu'import menuList from './mock/menu'class App extends React.Component { constructor(props) { super(props) this.state = { activePath: [] } } render() { return ( list={menuList} dep={0} activePath={this.state.activePath} changeActivePath={this.changeActivePath.bind(this)} /> ) } changeActivePath(dep, id, list) { let activePath = this.state.activePath if (!activePath[dep] || dep == activePath.length - 1) { //最后一個 添進去即可 activePath[dep] = id } else { //重新構建整個activePath數組 activePath[dep] = id let cur = [] for (let i = 0; i < list.length; i++) { let itemId = list[i].id if (itemId == id) { cur = list[i] break } } setPath(dep + 1, cur) } function setPath(dep, cur) { if (cur.children) { activePath[dep] = cur.children[0].id setPath(dep + 1, cur.children[0]) } } this.setState({ activePath }) }}export default App

Menu.js

import React, { Component } from 'react'import '../style/Menu.less'class Menu extends Component { constructor(props) { super(props) } componentDidMount() { let { id } = this.props.list[0] let { dep, activePath } = this.props if (!activePath[dep]) { this.props.changeActivePath(dep, id, this.props.list) } } renderMore(list, dep) { let moreList = [], id for (let i = 0; i < list.length; i++) { if (list[i].id == this.props.activePath[this.props.dep]) { moreList = list[i].children id = list[i].id break; } } if (Array.isArray(moreList) && moreList.length > 0) { return ( list={moreList} dep={dep + 1} activePath={this.props.activePath} changeActivePath={this.props.changeActivePath.bind(this)} /> ) } } clickItem(id) { this.props.changeActivePath(this.props.dep, id, this.props.list) } render() { let { list, dep } = this.props, renderList = list return ( className="list"> {renderList.map(item => { return <li id={item.id} onClick={this.clickItem.bind(this, item.id)} className={this.props.activePath.includes(item.id) ? 'active' : ''} key={item.id}>{item.name} })} {this.renderMore(list, dep)} ) }}export default Menu

Menu.less

ul,li { list-style: none; margin: 0; padding: 0;}.list { display: flex; li { margin: 10px; cursor: pointer; }}.active { color: red;}

總結

以上是生活随笔為你收集整理的react重新渲染菜单_React实现递归组件的全部內容，希望文章能夠幫你解決所遇到的問題。

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