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() {

    let infoList = this.state.infoList;

    return (

        <div>

            //根据infoList的长度动态渲染子组件，并且将infoList[i]的信息传入子组件显示

            {

                infoList.map((item, index)=>{

                    return  <PanelInfo key={index} panelDetail={item}/>

                })

            }

        </div>

    );

},