//加載CSS
require('normalize.css/normalize.css');
require('styles/App.scss');
import?React?from?'react';
//獲取圖片相關數(shù)據(jù)
const?imageDatas?=?require('json-loader!../data/imageDatas.json');
//利用自執(zhí)行函數(shù)，將圖片名信息轉(zhuǎn)成圖片URL路徑信息
ImageData?=?(function?genImageURL(imageDataArr)?{
??for?(var?i?=?0,?j?=?imageDataArr.length;?i?<?j;?i++)?{
????var?singleImageData?=?imageDataArr[i];
????singleImageData.imageURL?=?require('../images/'?+?singleImageData.fileName);
????imageDataArr[i]?=?singleImageData;
??}
??return?imageDataArr;
})(ImageData);
//單個圖片組件
class?ImgFigure?extends?React.Component?{
??render()?{
????return?(
??????<figure>
????????<img?src={this.props.data.imageURL}
?????????????alt={this.props.data.title}/>
????????<figcaption>
??????????<h2>{this.props.data.title}</h2>
????????</figcaption>
??????</figure>
????);
??}
}
class?GalleryAPP?extends?React.Component?{
??render()?{
????var?controllerUnits?=?[],
??????imgFigures?=?[];
????imageDatas.forEach(function?(value)?{
??????imgFigures.push(<ImgFigure?data={value}/>);
????});
????return?(
??????<section?className="stage">
????????<section?className="img-sec">
??????????{imgFigures}
????????</section>
????????<nav?className="controller-nav">
??????????{controllerUnits}
????????</nav>
??????</section>
????);
??}
}
GalleryAPP.defaultProps?=?{};
export?default?GalleryAPP;
沒有報錯但是圖片沒有顯示到網(wǎng)頁上
慕運維8582118
2018-09-13 16:07:50
