React 如何动态渲染子组件？

Question

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]}/>
}

Answer 1

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