Reactjs中的递归函数

Question

我正在使用递归功能制作动态菜单，并且我已经制作了菜单，并且它以正确的顺序显示，没有任何问题。

index.js：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentSelection: "",
      menuItems: [],
      isToggleOpen: false
    };
  }

  componentDidMount() {
    loadMenu().then(items => this.setState({ menuItems: items }));
  }

  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>
                {this.state.isToggleOpen}
                <Button onClick={this.toggle.bind(this)}> {item.name} </Button>
                <Collapse isOpen={this.state.isToggleOpen}>
                  {item.children && item.children.length > 0
                    ? this.buildMenu(item.children)
                    : null}
                </Collapse>
              </div>
            </li>
          ))}
      </ul>
    );
  }

  render() {
    console.log(this.state.menuItems);
    return (
      <div>
        <h2>Click any of the below option</h2>
        {this.state.menuItems &&
          this.state.menuItems.map((item, index) => {
            return (
              <div>
                <Button onClick={this.toggle.bind(this)}> {item.name} </Button>
                <Collapse isOpen={this.state.isToggleOpen}>
                  {this.buildMenu(item.children)}
                </Collapse>
              </div>
            );
          })}
      </div>
    );
  }
}

而且我从service.js文件接收菜单数据，您可以在下面的代码沙箱示例中看到整个工作的应用程序，

https://codesandbox.io/s/reactstrap-accordion-3uoz9

需求：

这里我需要找出菜单的最后一级，并需要为复选框分配值作为其各自的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值的复选框。

[请分叉提供的代码沙箱，并帮助我获得在最后一级创建复选框的结果。

可选要求：如果可能的话，该折叠一次可在整个菜单中使用，请使其在各个级别上以唯一的方式折叠。

但是主要的重要要求是在菜单的最后一级上选中一个复选框。预先非常感谢...

我正在使用递归功能制作动态菜单，并且我已经制作了菜单，并且菜单以正确的顺序显示，没有任何问题。 index.js：类App扩展了React.Component {...

Answer 1

buildMenu(items) {
    return (
      <ul>
        {items &&
          items.map((item, index) => (
            <li key={item.id}>
              <div>
                {this.state.isToggleOpen}
                {(item.children) ?  'Not Last': 'Here you can apply your check box'} //this check if item have children 
                <Button onClick={this.toggle.bind(this)}> {item.name} {index} </Button>

                <Collapse isOpen={this.state.isToggleOpen}>
                  {item.children && item.children.length > 0
                    ? this.buildMenu(item.children, index)
                    : null}
                </Collapse>
              </div>
            </li>
          ))}
      </ul>
    );
  }