为了账号安全,请及时绑定邮箱和手机立即绑定

error Newline required at end of file but not found eol-last

按照【React实战--打造画廊应用(上)】码的上半部分代码,抱一个错误,在代码的最后一行。求助!!!

http://img1.sycdn.imooc.com//572fb82d000104f808180136.jpg

代码部分

'use strict';



var React = require('react/addons');


// CSS

require('normalize.css');

require('../styles/main.scss');


// 获取图片相关的数据

var imageDatas = require('../data/imageDatas.json');


// 利用自执行函数, 将图片名信息转成图片URL路径信息

imageDatas = (function genImageURL(imageDatasArr) {

for (var i = 0, j = imageDatasArr.length; i < j; i++) {

var singleImageData = imageDatasArr[i];

singleImageData.imageURL = require('../images/' + singleImageData.fileName);

imageDatasArr[i] = singleImageData;

}

return imageDatasArr;

})(imageDatas);


/*

 * 获取区间内的一个随机值

 */

function getRangeRandom(low, high) {

return Math.ceil(Math.random() * (high - low) + low);

}


var ImgFigure = React.createClass({

render: function() {

return (

<figure className={imgFigureClassName} style={styleObj}>

<img src={this.props.data.imageURL}

alt={this.props.data.title}

/>

<figcaption>

<h2 className="img-title">{this.props.data.title}</h2>

<div className="img-back">

<p>

{this.props.data.desc}

</p>

</div>

</figcaption>

</figure>

);

}

});


var GalleryByReactApp = React.createClass({

Constant: {

centerPos: {

left: 0,

right: 0

},

hPosRange: { // 水平方向的取值范围

leftSecX: [0, 0],

rightSecX: [0, 0],

y: [0, 0]

},

vPosRange: { // 垂直方向的取值范围

x: [0, 0],

topY: [0, 0]

}

},

/*

* 重新布局所有图片

* @param centerIndex 指定居中排布哪个图片

*/

rearrange: function(centerIndex) {

var imgsArrangeArr = this.state.imgsArrangeArr,

Constant = this.Constant,

centerPos = Constant.centerPos,

hPosRange = Constant.hPosRange,

vPosRange = Constant.vPosRange,

hPosRangeLeftSecX = hPosRange.leftSecX,

hPosRangeRightSecX = hPosRange.rightSecX,

hPosRangeY = hPosRange.y,

vPosRangeTopY = vPosRange.topY,

vPosRangeX = vPosRange.x,


imgsArrangeTopArr = [],

topImgNum = Math.floor(Math.random() * 2), // 取一个或者不取

topImgSpliceIndex = 0,


imgsArrangeCenterArr = imgsArrangeArr.splice(centerIndex, 1);


// 首先居中 centerIndex 的图片, 居中的 centerIndex 的图片不需要旋转

imgsArrangeCenterArr[0] = {

pos: centerPos,

rotate: 0,

isCenter: true

};


// 取出要布局上侧的图片的状态信息

topImgSpliceIndex = Math.ceil(Math.random() * (imgsArrangeArr.length - topImgNum));

imgsArrangeTopArr = imgsArrangeArr.splice(topImgSpliceIndex, topImgNum);


// 布局位于上侧的图片

imgsArrangeTopArr.forEach(function(value, index) {

imgsArrangeTopArr[index] = {

pos: {

top: getRangeRandom(vPosRangeTopY[0], vPosRangeTopY[1]),

left: getRangeRandom(vPosRangeX[0], vPosRangeX[1])

},

rotate: get30DegRandom(),

isCenter: false

};

});


// 布局左右两侧的图片

for (var i = 0, j = imgsArrangeArr.length, k = j / 2; i < j; i++) {

var hPosRangeLORX = null;


// 前半部分布局左边, 右半部分布局右边

if (i < k) {

hPosRangeLORX = hPosRangeLeftSecX;

} else {

hPosRangeLORX = hPosRangeRightSecX;

}


imgsArrangeArr[i] = {

pos: {

top: getRangeRandom(hPosRangeY[0], hPosRangeY[1]),

left: getRangeRandom(hPosRangeLORX[0], hPosRangeLORX[1])

},

rotate: get30DegRandom(),

isCenter: false

};


}


if (imgsArrangeTopArr && imgsArrangeTopArr[0]) {

imgsArrangeArr.splice(topImgSpliceIndex, 0, imgsArrangeTopArr[0]);

}


imgsArrangeArr.splice(centerIndex, 0, imgsArrangeCenterArr[0]);


this.setState({

imgsArrangeArr: imgsArrangeArr

});

},



getInitialState: function() {

return {

imgsArrangeArr: [

/*{

pos: {

left: '0',

top: '0'

},

rotate: 0,    // 旋转角度

isInverse: false,    // 图片正反面

isCenter: false,    // 图片是否居中

}*/

]

};

},


// 组件加载以后, 为每张图片计算其位置的范围

componentDidMount: function() {


// 首先拿到舞台的大小

var stageDOM = React.findDOMNode(this.refs.stage),

stageW = stageDOM.scrollWidth,

stageH = stageDOM.scrollHeight,

halfStageW = Math.ceil(stageW / 2),

halfStageH = Math.ceil(stageH / 2);


// 拿到一个imageFigure的大小

var imgFigureDOM = React.findDOMNode(this.refs.imgFigure0),

imgW = imgFigureDOM.scrollWidth,

imgH = imgFigureDOM.scrollHeight,

halfImgW = Math.ceil(imgW / 2),

halfImgH = Math.ceil(imgH / 2);


// 计算中心图片的位置点

this.Constant.centerPos = {

left: halfStageW - halfImgW,

top: halfStageH - halfImgH

};


// 计算左侧,右侧区域图片排布位置的取值范围

this.Constant.hPosRange.leftSecX[0] = -halfImgW;

this.Constant.hPosRange.leftSecX[1] = halfStageW - halfImgW * 3;

this.Constant.hPosRange.rightSecX[0] = halfStageW + halfImgW;

this.Constant.hPosRange.rightSecX[1] = stageW - halfImgW;

this.Constant.hPosRange.y[0] = -halfImgH;

this.Constant.hPosRange.y[1] = stageH - halfImgH;


// 计算上侧区域图片排布位置的取值范围

this.Constant.vPosRange.topY[0] = -halfImgH;

this.Constant.vPosRange.topY[1] = halfStageH - halfImgH * 3;

this.Constant.vPosRange.x[0] = halfStageW - imgW;

this.Constant.vPosRange.x[1] = halfStageW;


this.rearrange(0);


},


render: function() {


var controllerUnits = [],

imgFigures = [];


imageDatas.forEach(function(value, index) {

if (!this.state.imgsArrangeArr[index]) {

this.state.imgsArrangeArr[index] = {

pos: {

left: 0,

top: 0

},

rotate: 0,

isInverse: false,

isCenter: false

};

}

imgFigures.push(<ImgFigure key={index} data={value} ref={'imgFigure' + index} arrange={this.state.imgsArrangeArr[index]} />);

// controllerUnits.push(<ControllerUnit key={index} arrange={this.state.imgsArrangeArr[index]} inverse={this.inverse(index)} center={this.center(index)}/>);

}.bind(this));


return (

<section className="stage" ref="stage">

<section className="img-sec">

{imgFigures}

</section>

<nav className="controller-nav">

{controllerUnits}

</nav>

</section>

);

}

});


React.render(<GalleryByReactApp />, document.getElementById('content')); // jshint ignore:line


module.exports = GalleryByReactApp;


正在回答

2 回答

出现Newline required at end of file but not found 即表示为每个js文件写完后 要多写一行的空白行

原因 eslint rules规则限制了:

/*eslint eol-last: ["error", "always"]*/

/*eslint eol-last: ["warn", "never"]*/

/*eslint eol-last:0*/关闭不限制即可

"always"(默认) 强制使用换行 (LF)

"never"强制文件末尾不要有换行符


2 回复 有任何疑惑可以回复我~

就是说,你的最后一句js代码module.exports = GalleryByReactApp;后面要加上回车,留出一个空行。我也被坑过、

2 回复 有任何疑惑可以回复我~
#1

道熙的夏天

可以讲明白点吗,我也碰到类似问题,在什么位置留空格??没听懂
2017-06-17 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
React实战--打造画廊应用(上)
  • 参与学习       57309    人
  • 解答问题       273    个

颠覆式前端UI开发框架 React,打造图片画廊实践案讲解

进入课程

error Newline required at end of file but not found eol-last

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信