//加载CSS
require('normalize.css/normalize.css');
require('styles/App.scss');
import React from 'react';
//获取图片相关数据
const imageDatas = require('json-loader!../data/imageDatas.json');
//利用自执行函数，将图片名信息转成图片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;
1 回答
慕运维8582118
TA贡献1条经验 获得超0个赞
Main.js?7cd4:13 Uncaught TypeError: Cannot read property 'fileName' of undefined
at genImageURL (eval at <anonymous> (app.js:2437), <anonymous>:35:80)
at Object.eval (eval at <anonymous> (app.js:2437), <anonymous>:39:2)
at Object.eval (eval at <anonymous> (app.js:2437), <anonymous>:119:27)
at eval (eval at <anonymous> (app.js:2437), <anonymous>:120:30)
at Object.<anonymous> (app.js:2437)
at __webpack_require__ (app.js:556)
at fn (app.js:87)
at Object.eval (eval at <anonymous> (app.js:1051), <anonymous>:15:13)
at Object.eval (eval at <anonymous> (app.js:1051), <anonymous>:24:27)
at eval (eval at <anonymous> (app.js:1051), <anonymous>:25:30)
添加回答
举报
0/150
提交
取消