react动态渲染子组件

最新推荐文章于 2025-07-22 19:29:28 发布

web渣渣辉

最新推荐文章于 2025-07-22 19:29:28 发布

阅读量7k

点赞数 1

//例如伪代码
infoList: [{
        "title": "panel_1",
        "context": "this is panel_1"
    },
    {
        "title": "panel_2",
        "context": "this is panel_2"
    }
]

render() {
    let infoList = this.state.infoList;

    return (
        <div>
            //根据infoList的长度动态渲染子组件，并且将infoList[i]的信息传入子组件显示
            {
                infoList.map((item, index)=>{
                    return  <PanelInfo key={index} panelDetail={item}/>
                })
            }
        </div>
    );
}


render(){
    let list = []
    if(this.state.infoList.length>0){
        this.state.infolist.map((item)=>{
        list.push(<p key={item.key}>{item.content}<p>)
        })
    }
    return (
        <div>
        {list}
        </div>
    )
}