react 将字符串转成html

在写项目的过程中，经常遇到渲染的数据是数组内嵌套数组的，之前都是用父子组件传值的方式来解决，今天发现项目中特别多这样的需求，如果都用子组件的话，就需要创建很多子组件，工作量也增加了很多。所以就想到了将html字符串转换成html;
该方法只适合纯静态展示，如果需要逻辑操作，建议还是使用父子组件传值的方式
方法如下：

import React , { Component } from 'react';
 class singerView extends Component{

    componentDidMount(){
        console.log(this.props.singerList)
    }
    singerDom(obj){
        let str='';
             obj.items.map((item,index)=>{
                str+= `<div>`+item.Fsinger_name+`</div>`
            })
            return str;
    }
    render(){
        let singerList = this.props.singerList;
        return(
            <ul>
                {
                    singerList.map((item,index)=>{
                        return <li key={ item+index }>
                            <h3>{ item.tittle }</h3>
                            //下面这句就是解决办法
                            <div dangerouslySetInnerHTML={{__html: this.singerDom(item)}} />
                        </li>
                    })
                }
            </ul>
        )
    }
}
export default singerView;

数据结构

最终效果