小编Mal*_*bur的帖子

人们如何使用react-router v4处理滚动恢复?

使用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响应.

reactjs react-router

16
推荐指数
2
解决办法
7727
查看次数

与通知有关的Gulp-sass错误

我想知道是否有办法让通知显示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)

我想将通知传递给某种错误回调.

任何帮助赞赏.

sass notify gulp

13
推荐指数
2
解决办法
1万
查看次数

获得gulp使用livereload

我有我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)

sass livereload gulp

9
推荐指数
1
解决办法
3万
查看次数

在反应状态下什么被认为是“数据太多”

我目前正在构建一个带有仪表板的应用程序,其中列出了大量统计信息。数据通过 API 加载并存储在我的组件状态中(目前不使用 redux — 只是简单的反应)。我正在加载超过 100.000(小)行数据,并将它们存储为状态数组。我的问题是:在什么时候我的状态的大小会成为问题?在某些时候肯定会有内存限制吗?数组中的 100.000 个条目是一个问题,是 1.000.000?如果是,处理如此大量数据的替代解决方案是什么?这是 redux 可以提供帮助的地方吗?

reactjs react-redux

9
推荐指数
1
解决办法
4924
查看次数

gulp minify-css删除了scss文件中的注释

我想成为一个好孩子,并用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)

第一个仍然删除评论.第二个报告错误.所以我想我可能会弄错格式?

有人能帮我一下吗?

谢谢

sass minify gulp

7
推荐指数
1
解决办法
5427
查看次数

如何设置像按钮元素一样的div?

我注意到在使用<button></button>元素时,浏览器自然会假设你想要内联内联内容,并且元素是可点击的.是否有可能通过css以相同的方式使用div?我浏览了UA样式表,看看我是否可以弄明白,但没有任何东西让它垂直居中.

我知道获得相同结果的唯一另一种方法是使用2个div.一个包装器display: table,和一个div display: table-cellvertical-align: middle.

但这会产生额外的div.只用一个元素就可以实现相同的行为吗?

谢谢.

html css button

7
推荐指数
2
解决办法
4万
查看次数

如何在不反转计时功能的情况下反转CSS动画?

假如有如下关键帧规则:

@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 规则才能获得反向动画,但可以轻松地作为双向计时函数。

谢谢。

css-animations

5
推荐指数
1
解决办法
1276
查看次数

为什么无法在svg路径元素上使用transform:translateZ?

我想为内嵌svg元素的一部分设置动画。我认为您可以在svg路径元素上使用css转换,从而为svg的各个部分设置动画,这真的很酷。但是在使用它之后,我遇到了translateZ函数的问题。由于某种原因,在路径元素上使用三维尺寸似乎无效?

有人知道为什么吗?它可以在svg元素上正常工作,但不能在具有类名的path元素上工作。我在这里做了一个小演示来说明问题:http : //codepen.io/anon/pen/uFEhp

关于这为什么的任何线索?

svg translate3d

5
推荐指数
0
解决办法
1632
查看次数

Gulp watch sass导致终端挂起 - 这就是重点吗?

所以我只是把手弄脏了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)

如果是这种情况 - 如何在不关闭并重新打开终端的情况下阻止它运行?如果这很简单,我很抱歉,但我对终端机构一无所知.

terminal gulp

4
推荐指数
1
解决办法
4013
查看次数

有没有更有效的方法来运行多个 UPDATE sql 语句

当谈到 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)

注意 …

mysql performance sql-update

2
推荐指数
1
解决办法
1173
查看次数