React—父组件循环创建多个子组件

1、新建文件夹
component文件夹=》navWrap文件夹=〉navWrap.js

2、父组件的js

import React, {Component} from 'react';
import Pic from 'pic/pic';
let list = [
    {
        img: require('images/1.jpg'),
        title: '易烊千玺',
        cont: '大佬'
    },
    {
        img: require('images/1.jpg'),
        title: '易烊千玺',
        cont: '大佬'
    }
]
export default class NavWrap extends Component {
    render () {
        let dataList = list.map((item, index) => {
            return ()
            // {...item}相当于下面的三句代码 es6的扩展运算符
            // img={item.img}
            // title={item.title}
            // cont={item.cont}
        })
        return (
            

                {dataList}
            
        )
    }
}

3、子组件

import React, {Component} from 'react';
export default class Pic extends Component {
    render () {
        let {img, title, cont} = this.props;
        return (
            

                
                
姓名:{title}
                
外号:{cont}
            
        )
    }
}