React 列表每一项下还有列表，怎么渲染？

Question

小白求教。
数据比如是这样：

let jobData =[
{department:'设计',jobs:['平面设计','UI设计']},
{department:'开发',jobs:['iOS开发','node开发']},
{department:'财务',jobs:['会计','会计实习生']}
];

我通过以下方法渲染出来了 department：

let department = jobData.map((ele,index) => <li key={index}>{ele.department}</li>);
return (
   <ul>{department}</ul>
);

但是每个 department 下面对应的 jobs列表，应该怎么渲染到对应的 department 下面呢？

感谢！

Answer 1

自己又折腾了一会儿终于弄出来了，不知道这样是不是很合理，但从结果上看达到目的了，分享一下，也感谢各位的回答！

render(){
        const jobData = this.props.jobData;

        let arr =[];
        for (var i = 0; i < jobData.length; i++) {
            arr.push (
                (<li key={'department'+i}>{jobData[i].department}
                    <ul>{
                        jobData[i].jobs.map(
                            (ele,index) => <li key={index}>{ele}</li>)
                        }
                    </ul>
                </li>)
            )
        }
        
        return (
            <div>
                <ul>{arr}</ul>
            </div>
        );
    }
}

Answer 2

递归调用同一个组件

Answer 3

jobData.map((ele,index) =>{
                        if(index>=0){
                            return <ul key={index}>
                                <li>{ele.department}</li>
                            {ele.jobs.map((o, i) => {
                                if(i>=0){
                                    return  <li key={i} >{o}</li>
                                }
                            })}</ul>
                        }
                    } )

Answer 4

这很明显用递归啊,最近正好也在学着写一个树组件,围观一下