小编Kon*_*sky的帖子

我一直在寻找一个"灯箱"类型的解决方案,允许这个但尚未找到一个(请,如果您知道任何,请建议).

我正在尝试重新创建的行为就像您在点击图片时在Pinterest上看到的那样.叠加层是可滚动的(因为整个叠加层像页面顶部的页面一样向上移动),但叠加层后面的主体是固定的.

我试图用CSS创建它(即div在整个页面和主体上面叠加overflow: hidden),但它不会阻止div可滚动.

如何防止正文/页面滚动但仍在全屏容器内滚动？

div即使用户滚动页面,我也希望显示哪个始终可见.我已经使用了CSS position: fixed;.

现在我也想div在父母的右角显示div.

我试图使用这个CSS代码来实现目标:

.test {
  position: fixed;
  text-align: right;
}

但它没有对齐右侧的元素.

我的示例页面可以在这里找到,div我想要对齐的元素test在父类下调用parent.

是否有任何CSS或JavaScript解决方案来对齐屏幕右侧的固定位置元素？

任何人都可以展示defaultProps在TypeScript 中定义React组件类的示例吗？

interface IProps {}
interface IState {}

class SomeComponent extends Component<IProps, IState> {
    // ... defaultProps ?
    // public defaultProps: IProps = {}; // This statement produces an error

    constructor(props: IProps) {
        super(props);
    }

    // ...
}

我有一个使用HTML和CSS实现的可折叠列表.该列表工作正常,但我需要一些修改.

每当我点击列表中的某个项目时,它就会展开.但是,当我单击同一列表中的另一个项目时,先前展开的元素将被折叠,而单击的元素将被展开.

请帮助我应用可以同时扩展多个列表项的行为.

我希望它只在HTML和CSS中完成.

这是我目前的实施.CSS样式:

.row { vertical-align: top; height: auto !important; }
list { display: none; }
.show { display: none; }
.hide:target + .show { display: inline; }
.hide:target { display: none; }
.hide:target ~ .list { display:inline; }
@media print { .hide, .show { display: none; } }

和HTML标记:

<div class="row">
  <a href="#hide1" class="hide" id="hide1">Expand</a>
  <a href="#show1" class="show" id="show1">Collapse</a>
  <div class="list">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

我的输入字段在按键时没有更新:

import React, { Component, PropTypes } from 'react';

import { Field, reduxForm } from 'redux-form';

class CitySelector extends Component {
  render() {
    const { isFetching, pristine, submitting, handleSubmit } = this.props;

    return (
      <form className="form-horizontal col-xs-offset-1" onSubmit={handleSubmit(this.fetchWeather)}>
        <div className="form-group">
          <div className="col-md-4 col-xs-4">
            <Field name="city"
                   component={city =>
                     <input type="text" className="form-control" {...city.input} placeholder="enter a city for a 5 day forecast"/>
                   }
            />
          </div>
          <div className="col-md-3 col-xs-3">
            <button type="submit" className="btn btn-success">Submit</button>
          </div>
        </div>
      </form>
    );
  }
}

export default reduxForm({
  form: 'cityForm' …

我现在仍然是Electron的新手,我现在正在这里.

我已经阅读了有关如何包含Chrome DevTools的页面,以便我可以轻松地调试我的应用程序.我已经按照文档进行了操作,但是一旦执行该命令,它就会返回错误:electron <app-name>The app provided is not a valid electron app, please read the docs on how to write one...

这是我main.js文件中的代码块:

var app = require('app');
var BrowserWindow = require('browser-window');

// Add Chrome DevTools extension for debugging
require('remote').require('browser-window').addDevToolsExtension('../react-devtools')

这就是我的项目结构的样子:

- react-devtools
- src
  -- index.html
  -- main.js
- package.json

任何帮助将不胜感激.谢谢!

我用gulp-connect这样的:

gulp.task('watch', function() {
  gulp.watch(paths.scss, ['scss']);

  gulp.watch(distPaths, function() {
    return gulp.src(distPaths)
               .pipe(connect.reload());
  });
});

实时重载位工作正常.

我的问题是,为什么以下不起作用:

gulp.task('watch', function() {
  gulp.watch(paths.scss, ['scss']);
  gulp.watch(distPaths, connect.reload);
});

这gulp.src(distPaths)是为了什么？

还有什么重要性return？

我正在尝试使用Electron(以前的Atom Shell)为Twitter编写一个包装器.

我的main.js文件(它看起来几乎与" Hello World "示例相同,我只是在一个地方更改了它):

var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Report crashes to our server.
require('crash-reporter').start();

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the javascript object is GCed.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  if …

我正在尝试获取与Chrome一起使用的JavaScript文件的源地图.当前gulp脚本的问题在于源映射(Browserify创建)导致文件的缩小版本.

例如,假设app.jsx是Browserify的一个入口文件,它拥有require('a')并require('b')调用它.app.jsx获得浏览器化,重新设置和uglifyied并按预期写入app.js.但是,模块a和模块b中的所有源映射引用也都会缩小:

var gulp = require('gulp'),
    browserify = require('browserify'),
    watchify = require('watchify'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    bundler;

bundler = browserify({
    entries: '/app.jsx',
    cache: {},
    packageCache: {},
    fullPaths: true
});

bundler
    .transform('reactify');
    .transform({
        global: true
    }, 'uglifyify');

bundler = watchify(bundler);
bundler.on('update', function() {
    return bundler
        .bundle()
        .pipe(source('app.js'))
        .pipe(buffer())
        .pipe(gulp.dest('/js'));
});

有关如何使其工作的任何想法？

我已经有一个使用create-react-app包创建的应用程序。我发现Jest版本为15.1.1的错误。但是我意识到在版本16中，该错误已消失。

如何更新Jest？

我的问题是在应用程序的package.json中没有Jest包。

笑话在其他文件夹中：node_modules / react-scripts。

我的标记很简单,我正在使用内联CSS.我的目标是margin: 0 auto;在styleHTML属性中使用图像居中.这是我尝试过的代码:

<div style="width: 100%;">
<img src="http://dummyimage.com/200x300/000000/fff" style="margin: 0 auto;"/>
</div>

为什么CSS不以我为中心<img>？

我正在一个具有本机CommonJS支持require模块的环境上开始一个新项目- 它是一个原子shell项目,不可能使用预编译步骤,如Browserify或webpack AFAIK.

我可以在我的声明的app.jsx入口点文件上使用JSX index.html,因为JSXTransformer之前声明过:

<script src="scripts/vendor/JSXTransformer.js"></script>
<script type="text/jsx" src="scripts/app.jsx"></script>

我希望能够将JSX语法用于在我的app.jsx模块中作为CommonJS模块导入的子模块:

// This raises an Error, the XML-like tags are not supported
var Grid = require('./scripts/grid.jsx');

据我所知,我将被迫删除JSX语法,并为任何加载的模块使用vanilla语法require.在这种情况下,还有其他方法可以使用JSX吗？

我试图在OS X上全局安装gulp,但我注意到一件我想要了解的奇怪事情.首先,我尝试了以下命令:

npm install -g glup

这导致以下错误:

npm ERR! Darwin 14.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "-g" "glup"
npm ERR! node v0.12.4
npm ERR! npm  v2.10.1
npm ERR! code E404

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/glup
npm ERR! 404 
npm ERR! 404 'glup' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 
npm ERR! 404 Note that you can …