javascript - React 如何动态渲染子组件?
本文介绍了javascript - React 如何动态渲染子组件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
export default class Panel extends React.Component{
constructor(props) {
super(props)
this.state = {
infoList : []
}
}
componentDidMount() {
//fetch 获取info 详细信息
//setState 将详细信息放入infoList
}
render() {
return (
<div>
//根据infoList的长度动态渲染子组件,并且将infoList[i]的信息传入子组件显示
<PanelInfo />
</div>
);
}
}
如上述代码通过fetch获取详情的列表,并且通过列表长度和列表里对象的各个属性值渲染子组件,如何实现?
//例如伪代码
infoList : [
{"title":"panel_1","context":"this is panel_1"},
{"title":"panel_2","context":"this is panel_2"}
]
for(let i = 0;i < infoList.length; i++) {
<PanelInfo panelDetail={this.state.infoList[i]}/>
}
解决方案
render() {
let infoList = this.state.infoList;
return (
<div>
//根据infoList的长度动态渲染子组件,并且将infoList[i]的信息传入子组件显示
{
infoList.map((item, index)=>{
return <PanelInfo key={index} panelDetail={item}/>
})
}
</div>
);
},
这篇关于javascript - React 如何动态渲染子组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文