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>
)
}
}