1、app.js
import React from 'react';
import ReactDom from 'react-dom';
import './common/style.css';
import Nav from 'nav/nav';
import NavWrap from 'navWrap/navWrap';
let list = [
{
img: require('images/1.jpg'),
title: '易烊千玺',
cont: '大佬'
},
{
img: require('images/1.jpg'),
title: '易烊千玺',
cont: '大佬'
}
]
ReactDom.render(
<div>
<Nav></Nav>
<NavWrap list={list}></NavWrap> // NavWrap这个组件调用list数组
</div>,
document.getElementById('root')
)
2、NavWrap.js
export default class NavWrap extends Component {
render () {
let dataList = this.props.list.map((item, index) => { // 这里和调用自身组件的数据有所不同需要用到props
return (<Pic
key={index}
{...item}
></Pic>)
})
return (
<div className="navWrap">
{dataList}
</div>
)
}
}