小编svn*_*vnm的帖子

如果我有一个react组件并且我想传入一个className,我该如何使用CSS模块执行此操作.它目前只提供className但不提供我将获得的哈希生成的css模块名称 <div className={styles.tile + ' ' + styles.blue}>

这是我的Tile.js组件

import React, { Component } from 'react';

import styles from './Tile.css';

class Tile extends Component {

  render() {

    return (
      <div className={styles.tile + ' ' + this.props.color}>
        {this.props.children}
      </div>
    );
  }
};

export default Tile;

Tile.css

@value colors: "../../styles/colors.css";
@value blue, black, red from colors;

.tile {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}

.black {
  background-color: black;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
} …

我试图找到在react-router中的路由之间制作动画的文档.

我看到以下问题有一些讨论.在评论结束时,我看到lulridge给出了一个非常好的例子

那么......这个例子是反应路由器中路由之间动画的正确/推荐方法吗？这会导致路线之间的转换,无论路线,图像,文字中显示什么内容？

注意:它似乎排序的工作对我来说,但过渡的平滑度似乎取决于每个路由之间有多少数据被加载.

JS

// the key part in your top level route/component e.g. Layout.js 
// where you wrap the RouteHandler in the TransitionGroup

import React from 'react/addons'
let TransitionGroup = React.addons.CSSTransitionGroup;
let { RouteHandler, Link } = require('react-router')

<TransitionGroup component="div" transitionName="page-transition">
  <RouteHandler {...this.props} />
</TransitionGroup>

CSS

.page-transition-enter {
  -webkit-transition: opacity 0.3s ease-in-out;
          transition: opacity 0.3s ease-in-out;
  opacity: 0;
  position: absolute;
}
.page-transition-enter.page-transition-enter-active {
  opacity: 1;
}
.page-transition-leave {
  -webkit-transition: opacity 0.3s ease-in-out; …

我正在使用Gulp作为我的任务运行器并使用浏览器来捆绑我的CommonJs模块.

我注意到运行我的browserify任务非常慢,大约需要2到3秒,我所拥有的只是React和我为开发构建的一些非常小的组件.

有没有办法加快任务,或者我的任务中是否有任何明显的问题？

gulp.task('browserify', function() {
  var bundler = browserify({
    entries: ['./main.js'], // Only need initial file
    transform: [reactify], // Convert JSX to javascript
    debug: true, cache: {}, packageCache: {}, fullPaths: true
  });

  var watcher  = watchify(bundler);

  return watcher
  .on('update', function () { // On update When any files updates
    var updateStart = Date.now();
        watcher.bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./'));
        console.log('Updated ', (Date.now() - updateStart) + 'ms');
  })
  .bundle() // Create initial bundle when starting the task 
  .pipe(source('bundle.js'))
  .pipe(gulp.dest('./'));
});

我正在使用Browserify,Watchify,Reactify和Vinyl Source Stream以及其他一些不相关的模块. …

我试图用aws lambda发送一个简单的请求.

我的模块结构如下:

mylambda
|-- index.js
|-- node_modules
|   |-- request

我将文件压缩并上传到lambda.

然后我调用它,它返回以下错误. "errorMessage": "Cannot find module 'index'"

这是index.js文件的内容

var request = require('request');

exports.handler = function(event, context) {

    var headers = { 'User-Agent': 'Super Agent/0.0.1', 'Content-Type': 'application/x-www-form-urlencoded' }

    // Configure the request
    var options = {
        url: 'https://myendpoint',
        method: 'POST',
        headers: headers,
        form: {'payload': {"text":""} }
    }

    // Start the request
    request(options, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body)
        }
    })

    console.log('value1 =', event.key1); …

我有以下样式组件，我正在尝试添加一个 unicode 字符\00d7作为伪选择器的内容，它是一个交叉或关闭图标。

然而，这似乎不像在 css 中那样工作。当然，我可以为这个关闭图标使用 svg 作为替代方案，我只是想知道这是否可以使用样式组件？它似乎允许空白的伪选择器，例如''

const Close = styled.span`
  color: pink;
  &:before {
    content: '\00d7';
  }
`

在移动设备上点击或点击时,Ionic的速度更快.对我来说,它们看起来非常相似但是onClick要慢得多.

codepen

<button class="button button-light button-dark" on-tap="onTap()">tap</button>
<button class="button button-light button-dark" ng-click="onClick()">click</button>

我开始使用babel.js来使用JavaScript ES6功能,但是我遇到了一个问题

我目前正在使用browserify构建我的应用程序并使用以下命令重新执行.

browserify -t reactify app/main.js -o public/scripts/bundle.js

现在我想在babel中使用一个等效命令将我需要的模块捆绑在一起,用ES6编写一个bundle.js.这不起作用,只给我一个ES5版本的main.js文件.

babel app/main.js -o public/scripts/bundle.js

但是我可以将我的bundle.js文件编译成带有babel的ES6版本,有2个命令

browserify -t reactify app/main.js -o public/scripts/bundle.js
babel app/main.js -o public/scripts/babel.js

这是使用browserify使用babel的正确方法吗？使用browserify捆绑您的模块,然后将捆绑包转换为ES6？

我有以下转换,似乎在IE11中不起作用.

是否有替代方案可以让IE在IE11中运行？

transform: translateY(calc(-100% - 5rem))
-ms-transform: translateY(calc(-100% - 5rem))

是否可以使用 StyleSheet 或样式组件在本机反应中进行转换？我正在尝试以下操作，但没有运气。

import React from 'react'
import styled from 'styled-components/native'
import { Text, View, StyleSheet } from 'react-native'

export default class extends React.Component {
  render() {
    return (
      <Wrapper visible={visible}><Text>hello</Text>
    )
  }    
}

const Wrapper = styled.View`
  opacity: ${props => props.visible ? 1 : 0};
  transition: opacity 1s linear;
`

const styles = StyleSheet.create({
  wrapper: {
    opacity: 1,
    transition:'opacity 1s linear'
  }
});

我刚刚安装了babel装载机,使用带有webpack的babel.

它带来了3个额外的节点依赖,但是我预计只有2个

来自babel loader package.json

"peerDependencies": {
  "babel-core": "*",
  "webpack": "*"
},

那么为什么我也得到node-libs-browser我不知道它是什么,并且不希望我的devDependencies中有额外的模块