react.js - React 列表每一项下还有列表，怎么渲染？

问题描述

问 题

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

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 下面呢？

感谢！

解决方案

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

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>
        );
    }
}

这篇关于react.js - React 列表每一项下还有列表，怎么渲染？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！