使用react-router时,我在后退按钮(历史记录popstate)上滚动位置遇到了一些问题.React路由器v4不能处理开箱即用的滚动管理,因为浏览器正在实现一些自动滚动行为.这很好,除非浏览器窗口的高度从一个视图到另一个视图的变化太大.我已经实现了ScrollToTop组件,如下所述:https://reacttraining.com/react-router/web/guides/scroll-restoration
这非常有效.当您单击链接并转到其他组件时,浏览器会滚动到顶部(就像正常的服务器呈现的网站一样).只有当您返回(通过浏览器后退按钮)到窗口高度更高的视图时,才会出现此问题.似乎(chrome)在react呈现内容(和浏览器高度)之前尝试转到上一页的滚动位置.这导致滚动只能根据它来自的视图的高度尽可能地向下移动.想象这个场景:
View1:长电影列表(窗口高度3500px).
(单击电影)
View2:所选电影的详细信息视图(窗口高度:1000px).
(单击浏览器后退按钮)
返回视图1,但滚动位置不能超过1000px,因为chrome在尝试渲染长影片列表之前尝试设置位置.
出于某种原因,这只是Chrome中的一个问题.Firefox和Safari似乎处理得很好.我想知道是否有其他人有这个问题,以及你们如何在React中处理滚动恢复.
注意:所有电影都是从sampleMovies.js导入的 - 所以我不是在等待我的示例中的API响应.
我想知道是否有办法让通知显示gulp-sass错误消息.最好是控制台中显示的实际消息.
我的gulp任务看起来像这样:
gulp.task('styles', function() {
return gulp.src('src/scss/style.scss')
.pipe(sass({ style: 'compressed', errLogToConsole: true }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest(''))
.pipe(livereload(server))
.pipe(notify({ message: 'Styles task complete' }));
});
Run Code Online (Sandbox Code Playgroud)
我想将通知传递给某种错误回调.
任何帮助赞赏.
我有我Gulpfile
的编译我的sass
,只是" live-reload
远离倾销codekit
".我正在努力让这种风格的注射工作.我试图设置它:https://github.com/vohof/gulp-livereload
当我在终端中运行gulp时,它似乎编译了sass,但它没有注入样式.我究竟做错了什么?我在chrome +以下节点模块中安装了livereload扩展:
"devDependencies": {
"gulp": "~3.5.0",
"gulp-sass": "~0.6.0"
},
"dependencies": {
"gulp-livereload": "~0.2.0",
"tiny-lr": "0.0.5"
}
Run Code Online (Sandbox Code Playgroud)
我的gulpfile看起来像这样:
var gulp = require('gulp');
//plugins
var sass = require('gulp-sass'),
lr = require('tiny-lr'),
livereload = require('gulp-livereload'),
server = lr();
gulp.task('sass', function () {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./'))
.pipe(livereload(server));
});
// Rerun tasks when a file changes
gulp.task('watch', function () {
server.listen(35729, function (err) {
if (err) return console.log(err);
gulp.watch('scss/**/*.scss', ['sass']);
});
});
// …
Run Code Online (Sandbox Code Playgroud) 我目前正在构建一个带有仪表板的应用程序,其中列出了大量统计信息。数据通过 API 加载并存储在我的组件状态中(目前不使用 redux — 只是简单的反应)。我正在加载超过 100.000(小)行数据,并将它们存储为状态数组。我的问题是:在什么时候我的状态的大小会成为问题?在某些时候肯定会有内存限制吗?数组中的 100.000 个条目是一个问题,是 1.000.000?如果是,处理如此大量数据的替代解决方案是什么?这是 redux 可以提供帮助的地方吗?
我想成为一个好孩子,并用gulp缩小我的CSS.我目前正在使用gulp-sass(不是gulp-ruby-sass),它似乎没有内置的缩小.所以现在我正在使用gulp-minify-css来管理一些缩小到我的编译.问题是它现在删除了我的所有评论.这两个/*comment*/
和//comment
.这并不理想,因为我需要初步评论来设置我的wordpress主题.
所以我查看了文档(https://github.com/jonathanepollack/gulp-minify-css/wiki),看起来有一个名为keepSpecialComments的选项.
所以我在gulpfile中尝试了以下内容:
.pipe(minifycss({keepSpecialComments: '*'}))
Run Code Online (Sandbox Code Playgroud)
和
.pipe(minifycss({keepSpecialComments: *}))
Run Code Online (Sandbox Code Playgroud)
第一个仍然删除评论.第二个报告错误.所以我想我可能会弄错格式?
有人能帮我一下吗?
谢谢
我注意到在使用<button></button>
元素时,浏览器自然会假设你想要内联内联内容,并且元素是可点击的.是否有可能通过css以相同的方式使用div?我浏览了UA样式表,看看我是否可以弄明白,但没有任何东西让它垂直居中.
我知道获得相同结果的唯一另一种方法是使用2个div.一个包装器display: table
,和一个div display: table-cell
和vertical-align: middle
.
但这会产生额外的div.只用一个元素就可以实现相同的行为吗?
谢谢.
假如有如下关键帧规则:
@keyframes bounceIn {
0% {transform:translateX(0);}
60% {transform:translateX(18rem);}
100% (transform:translateX(15rem);}
}
Run Code Online (Sandbox Code Playgroud)
然后将其添加到这样的元素中:
.myDiv {
animation: bounceIn .5s ease;
animation-direction: reverse;
}
Run Code Online (Sandbox Code Playgroud)
然后计时功能也会反转。有没有办法避免计时功能反转,或者是否有一个计时功能可以轻松使用?
我对此很感兴趣,因为否则我将不得不编写 2 个 @keyframe 规则才能获得反向动画,但可以轻松地作为双向计时函数。
谢谢。
我想为内嵌svg元素的一部分设置动画。我认为您可以在svg路径元素上使用css转换,从而为svg的各个部分设置动画,这真的很酷。但是在使用它之后,我遇到了translateZ函数的问题。由于某种原因,在路径元素上使用三维尺寸似乎无效?
有人知道为什么吗?它可以在svg元素上正常工作,但不能在具有类名的path元素上工作。我在这里做了一个小演示来说明问题:http : //codepen.io/anon/pen/uFEhp
关于这为什么的任何线索?
所以我只是把手弄脏了Gulp.我从未与Grunt合作,但似乎Gulp是新的大事.一切似乎都很好.我已使用以下gulpfile.js成功将SCSS编译为CSS:
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var sass = require('gulp-sass');
var rename = require('gulp-rename');
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
// Rerun the task when a file changes
gulp.task('watch', function () {
gulp.watch('scss/**/*.scss', ['sass']);
});
// Default Task
gulp.task('default', ['sass', 'watch']);
Run Code Online (Sandbox Code Playgroud)
事情是:当我在终端中运行Gulp默认时,它启动脚本,但永远不会结束它.我假设这是重点,为了让Gulp观看我的文件 - 它必须继续运行.
它处于待机状态:
[gulp] Running 'sass'...
[gulp] Finished 'sass' in 8.47 ms
Run Code Online (Sandbox Code Playgroud)
如果是这种情况 - 如何在不关闭并重新打开终端的情况下阻止它运行?如果这很简单,我很抱歉,但我对终端机构一无所知.
当谈到 sql 查询时,我有点菜鸟,而且我只真正使用过基本的 SELECT、UPDATE、DELETE 语句。现在我需要更新一个垂直表中的很多行(50+),并且我正在运行这样的语句:
UPDATE `postmeta` SET meta_value = 'John' WHERE `meta_key` = 'name' AND `post_id` = 29230;
UPDATE `postmeta` SET meta_value = 'Johnson' WHERE `meta_key` = 'last_name' AND `post_id` = 29230;
UPDATE `postmeta` SET meta_value = 'www.johnsonsdiner.com' WHERE `meta_key` = 'url' AND `post_id` = 29230;
UPDATE `postmeta` SET meta_value = 'john@johnson.com' WHERE `meta_key` = 'mail' AND `post_id` = 29230;
UPDATE `postmeta` SET meta_value = '12341234' WHERE `meta_key` = 'phone' AND `post_id` = 29230;
... + 45 more
Run Code Online (Sandbox Code Playgroud)
注意 …
gulp ×4
sass ×3
reactjs ×2
button ×1
css ×1
html ×1
livereload ×1
minify ×1
mysql ×1
notify ×1
performance ×1
react-redux ×1
react-router ×1
sql-update ×1
svg ×1
terminal ×1
translate3d ×1