react 将字符串转成html

最新推荐文章于 2025-05-09 15:33:17 发布

banzhuanren1

最新推荐文章于 2025-05-09 15:33:17 发布

阅读量3.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react 字符串转html

本文链接：https://blog.youkuaiyun.com/banzhuanren1/article/details/102503399

react 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种在React中处理数组嵌套数组数据的渲染方法，通过将HTML字符串转换为DOM元素，实现复杂数据结构的高效展示。适用于纯静态内容，避免了大量子组件的创建，减少了工作量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写项目的过程中，经常遇到渲染的数据是数组内嵌套数组的，之前都是用父子组件传值的方式来解决，今天发现项目中特别多这样的需求，如果都用子组件的话，就需要创建很多子组件，工作量也增加了很多。所以就想到了将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;

数据结构
在这里插入图片描述
最终效果