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 (<Pic
                key={index}
                {...item}
            ></Pic>)
            // {...item}相当于下面的三句代码 es6的扩展运算符
            // img={item.img}
            // title={item.title}
            // cont={item.cont}
        })
        return (
            <div className="navWrap">
                {dataList}
            </div>
        )
    }
}

3、子组件

import React, {Component} from 'react';
export default class Pic extends Component {
    render () {
        let {img, title, cont} = this.props;
        return (
            <div className="pic">
                <img src={img} alt=""/>
                <h3>姓名:{title}</h3>
                <p>外号:{cont}</p>
            </div>
        )
    }
}