默认根据id打开可折叠菜单

问题描述

我正在制作嵌套菜单和子菜单，到目前为止一切都已完成..我现在需要根据给定的 id 使这个可折叠菜单默认打开..

您还可以查看下面完整的工作代码片段，

const loadMenu = () =>Promise.resolve([{id:"1",name:"One",children:[{id:"1.1",name:"One - one",children:[{id:"1.1.1",name:"一-一-一"},{id:"1.1.2",name:"一-一-二"},{id:"1.1.3",name:"一-一-三"}]}]},{id:"2",name:"Two",children:[{id:"2.1",name:"Two - one"}]},{id:"3",name:"Three",children:[{id:"3.1",name:"三一",children:[{id:"3.1.1",name:"三一一",children:[{id:"3.1.1.1",name:"三一一一一",children:[{id:"3.1.1.1.1",name:"三一一一一一一"}]}]}]}]},{id:"4",name:"Four"},{id:"5",name:"Five",children:[{id:"5.1",name:"Five - one"},{id:"5.2",name:"五-二"},{id:"5.3",name:"五-三"},{id:"5.4",name:"五-四"}]},{id:"6",name:"6"}]);const openMenuId = "3.1.1.1";const {组件，片段} = 反应；const {按钮，折叠，输入} = Reactstrap；类菜单扩展组件{构造函数(道具){超级(道具)；this.state = {menuItems: []};}使成为() {return <MenuItemContainer menuItems={this.state.menuItems}/>;}componentDidMount() {loadMenu().then(menuItems => this.setState({menuItems}));}}功能菜单项容器(道具){if (!props.menuItems.length) 返回空值；const renderMenuItem = menuItem =><li key={menuItem.id}><MenuItem {...menuItem}/></li>;return 
{props.menuItems.map(renderMenuItem)}
;}MenuItemContainer.defaultProps = {menuItems: []};类 MenuItem 扩展组件 {构造函数(道具){超级(道具)；this.state = {isOpen: false};this.toggle = this.toggle.bind(this);}使成为() {让 isLastChild = this.props.children ?假:真；返回 (<片段><Button onClick={this.toggle}>{this.props.name}</Button><片段>{是最后一个孩子?<Input type="checkbox" value={this.props.id}/>:''}</片段><折叠 isOpen={this.state.isOpen}><MenuItemContainer menuItems={this.props.children}/></收起></片段>);}切换(){this.setState(({isOpen}) => ({isOpen: !isOpen}));}}ReactDOM.render(, document.getElementById("root"));

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"/><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/8.4.1/reactstrap.min.js"></script><div id="root"></div>

要求:

我有一个 id 值存储在 const openMenuId = "3.1.1.1.1"; 父组件中(您可以在 loadMenu 数组变量下方查看此变量)..

即使有多个子菜单，这个 id 也只属于最后一级的孩子 id，因此肯定会有一个复选框，以便需要选中复选框，并且需要打开父级的菜单.

例如……

由于 openMenuId 是 "3.1.1.1.1"，因此很明显菜单 three 的最后一个子级是 Three - one - one- one - one 需要勾选，因为openMenuId和checkbox的值在这里匹配..然后需要将各自的菜单和子菜单扩展到最后一层.

这仅适用于访问的页面上的默认行为，因此在该用户可以折叠回来并能够检查任何其他菜单中的任何其他复选框之后..但是在访问该页面时，我将有一个需要打开的特定 ID默认，也需要在复选框中选中..

请帮助我通过比较作为props传递的id来实现打开相应菜单的结果并检查相应的菜单..

挣扎了很长时间，所以请帮助我.. 提前致谢..

解决方案

多好的问题！我真的很喜欢为这个问题想出一个解决方案.

因为你想给菜单状态和复选框状态一个初始状态，我认为在 <Menu> 级别(甚至更高！)控制两者的状态是一个好主意.这不仅使从父级定义初始状态变得容易，而且如果您将来需要更复杂的菜单或复选框行为，它还为您提供了更大的灵活性.

由于菜单的结构是递归的，我认为菜单状态的递归结构效果很好.在我进入代码之前，这里有一个简短的 GIF，我希望它有助于解释状态的样子:

演示

这是操场片段:

const loadMenu = () =>Promise.resolve([{编号:1"，name: "一个",孩子们: [{编号:1.1"，name: "一-一",孩子们: [{ id: "1.1.1", name: "一一一" },{ id: "1.1.2", name: "一-一-二" },{ id: "1.1.3", name: "一-一-三" }]}]},{ id: "2", name: "Two", children: [{ id: "2.1", name: "Two - one" }] },{编号:3"，name: "三",孩子们: [{编号:3.1"，name: "三一",孩子们: [{编号:3.1.1"，name: "三一一",孩子们: [{编号:3.1.1.1"，名称:三一一一"，孩子们: [{ id: "3.1.1.1.1", name: "三一一一一一" }]}]}]}]},{ id: "4", name: "4" },{编号:5"，name: "五",孩子们: [{ id: "5.1", name: "五-一" },{ id: "5.2", name: "五-二" },{ id: "5.3", name: "五-三" },{ id: "5.4", name: "五 - 四" }]},{ id: "6", name: "6" }]);const { 组件，片段} = 反应；const { 按钮，折叠，输入 } = Reactstrap;const replaceNode = (replacer, node, idPath, i) =>{if (i  idPath.length){//到达目标节点返回替换器(节点)；}//构造与此深度匹配的ID - 深度含义//ID之间的点数const id = idPath.slice(0, i).join(".");返回 {...节点，//递归[id]:replaceNode(replacer, node[id], idPath, i + 1)};};const replaceNodeById = (node, id,visitor) =>{//传递 id 部分的数组而不是处理字符串//直接 - 处理多编号 ID 部分的简单方法，例如3.1.15.32return replaceNode(visitor, node, id.split("."), 1);};const expandNode = () =>({});const unexpandedNode = () =>不明确的;const toggleNodeById = (node, id) =>replaceNodeById(node, id, oldNode =>旧节点?unexpandedNode() : expandNode());const expandNodeById = (node, id) =>replaceNodeById(node, id, oldNode => expandNode());类菜单扩展组件{构造函数(道具){超级(道具)；this.state = {菜单项:[]，打开菜单:{}，选中的菜单:{}};this.handleMenuToggle = this.handleMenuToggle.bind(this);this.handleChecked = this.handleChecked.bind(this);}使成为() {const { menuItems, openMenus, checkedMenus } = this.state;返回 (
<div style={{ padding: "10px", marginLeft: "auto" }}><p>菜单状态</p><pre>{JSON.stringify(openMenus, null, 2)}</pre>

<div style={{ padding: "10px", width: "177px" }}><p>复选框状态</p><pre>{JSON.stringify(checkedMenus, null, 2)}</pre>