我正在使用递归函数制作动态菜单，并且我已经制作了菜单并且它以正确的顺序显示而没有任何问题。
我从service.js文件接收菜单数据，您可以在下面的代码沙箱示例中看到整个工作应用程序，
要求：
在这里，我需要找出菜单的最后一级，并需要为复选框分配 value 作为它们各自的 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
对于第二个菜单二，
-> [Checkbox with value as 2.1] Two - one
.
.
.
对于第六菜单六，
-> [Checkbox with value as 6] Six
我希望这一点很清楚，我需要找出递归的最后一个级别，并且应该为其分配一个复选框，其中包含它们的 id 值。
请 fork 提供的代码沙箱，并帮助我实现在最后一级制作复选框的结果。
可选要求： 如果可能的话，折叠可以立即对整个菜单起作用，请使其在每个单独的级别上以唯一的方式折叠。
但主要的重要要求是在菜单的最后一级制作一个复选框。提前非常感谢...
编辑：
正如 Crowder 所评论的，我已经创建了删除 reactstrap 代码的片段，现在可以了，因为我需要将复选框内联显示到子菜单的最后一级（最后一个子元素）。
const menuData = [
{
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" }
];
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
currentSelection: "",
menuItems: [],
isToggleOpen: false
};
}
componentDidMount() {
this.setState({ menuItems: menuData });
}
handleClick(id, evt) {
evt.preventDefault();
console.log("click handler called with", id);
this.setState({ currentSelection: id });
}
toggle() {
console.log(this.state);
this.setState({
isToggleOpen: !this.state.isToggleOpen
});
}
buildMenu(items) {
return (
<ul>
{items &&
items.map(item => (
<li key={item.id}>
<div>
{item.name}
{item.children && item.children.length > 0
? this.buildMenu(item.children)
: null}
</div>
</li>
))}
</ul>
);
}
render() {
return (
<div>
<h2>Click any of the below option</h2>
{this.state.menuItems &&
this.state.menuItems.map((item, index) => {
return (
<div key={index}>
{item.name}
{this.buildMenu(item.children)}
</div>
);
})}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.css" />
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.development.js"></script>