绑定多个ul li子类别

Question

我有一些类别列表，我必须根据用户单击来开发动态下拉菜单，我必须调用API，并且需要将类别下的子类别绑定。

我必须为特定的li绑定子类别，但为每个类别li绑定。

直到现在我已经尝试过了，

subCategeries = ({subCategeries, index}) => {
        return (
            <ul>
                {subCategeries.map(subCategeries => {
                    return (<li key={subCategeries.id} onClick={(event) => {
                        this.getSubSubCategeries(event, subCategeries.id)
                    }}>
                        {subCategeries.name}
                        <this.subSubCategeries subSubCategeries={this.state.subSubCategeries}/>
                    </li>);
                })}
            </ul>
        );
    };
    subSubCategeries = ({subSubCategeries}) => {
        return (
            <ul>
                {subSubCategeries.map(subSubCategeries => {
                    return (<li key={subSubCategeries.id}>
                        {subSubCategeries.name}
                    </li>);
                })}
            </ul>
        );
    };


    render() {
        var self = this;
        console.log(self);


        var mainCategeries = this.state.mainCategeries && this.state.mainCategeries.length > 0 && this.state.mainCategeries.map((obj, index) =>
            <li key={index}><a onClick={(event) => {
                this.getSubCategeries(event, obj.id)
            }}>{obj.name}
                {this.state.subCategeries.length > 0 ? (
                        <this.subCategeries index={index} subCategeries={this.state.subCategeries}/>)
                    : ''
                }
            </a>

            </li>);


        return (
            <ul>{mainCategeries}
            </ul>
        );

    }