我正在使用递归功能制作动态菜单,并且我已经制作了菜单,并且它以正确的顺序显示,没有任何问题。
需求:
这里我需要找出菜单的最后一级,并需要为复选框分配值作为其各自的ID {item.id}
。
例如:
对于第一菜单一个,
-> [Checkbox with value as 1.1.1] One-One-One
-> [Checkbox with value as 1.1.2] One - one - two
-> [Checkbox with value as 1.1.3] One - one - three
对于第二菜单two,
-> [Checkbox with value as 2.1] Two - one
。
。
。
对于第六菜单六,
-> [Checkbox with value as 6] Six
我希望重点很清楚,我需要像上面的示例一样找出最后一级的子级,并为其分配一个复选框,其值为id
。
[请查看下面提供的代码段,并帮助我获得在最后一级显示复选框的结果
注:复选框必须为inline,其最后一级元素类似于上面的示例,其中复选框值分别为id
。
此要求的目的是它将具有多个子菜单,并且最后一级具有过滤器值,因此在单击复选框时,我将该值传递给api
并检索此特定选中菜单项的相关数据,并将显示。。但是在这里,我需要与菜单项相对应的复选框显示。
const loadMenu = () => Promise.resolve([{id:"1",name:"One",children:[{id:"1.1",name:"One - one",children:[{id:"1.1.1",name:"One - one - one"},{id:"1.1.2",name:"One - one - two"},{id:"1.1.3",name:"One - one - three"}]}]},{id:"2",name:"Two",children:[{id:"2.1",name:"Two - one"}]},{id:"3",name:"Three",children:[{id:"3.1",name:"Three - one",children:[{id:"3.1.1",name:"Three - one - one",children:[{id:"3.1.1.1",name:"Three - one - one - one",children:[{id:"3.1.1.1.1",name:"Three - one - one - one - one"}]}]}]}]},{id:"4",name:"Four"},{id:"5",name:"Five",children:[{id:"5.1",name:"Five - one"},{id:"5.2",name:"Five - two"},{id:"5.3",name:"Five - three"},{id:"5.4",name:"Five - four"}]},{id:"6",name:"Six"}]); const {Component, Fragment} = React; const {Button, Collapse} = Reactstrap; class Menu extends Component { constructor(props) { super(props); this.state = {menuItems: []}; } render() { return <MenuItemContainer menuItems={this.state.menuItems} />; } componentDidMount() { loadMenu().then(menuItems => this.setState({menuItems})); } } function MenuItemContainer(props) { if (!props.menuItems.length) return null; const renderMenuItem = menuItem => <li key={menuItem.id}><MenuItem {...menuItem} /></li>; return <ul>{props.menuItems.map(renderMenuItem)}</ul>; } MenuItemContainer.defaultProps = {menuItems: []}; class MenuItem extends Component { constructor(props) { super(props); this.state = {isOpen: false}; this.toggle = this.toggle.bind(this); } render() { return ( <Fragment> <Button onClick={this.toggle}>{this.props.name}</Button> <Collapse isOpen={this.state.isOpen}> <MenuItemContainer menuItems={this.props.children} /> </Collapse> </Fragment> ); } toggle() { this.setState(({isOpen}) => ({isOpen: !isOpen})); } } ReactDOM.render(<Menu />, 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>
我正在使用递归功能制作动态菜单,并且我已经制作了菜单,并且菜单以正确的顺序显示,没有任何问题。要求:这里我需要找出最后一个...
据我所知,您需要最后一个孩子的复选框。这可以通过检查元素是否有子元素来实现。