小编Kay*_*ote的帖子

为什么`Export Default Const`无效?

我看到以下情况很好:

const Tab = connect( mapState, mapDispatch )( Tabs );
export default Tab;
Run Code Online (Sandbox Code Playgroud)

但是,这是不正确的:

export default const Tab = connect( mapState, mapDispatch )( Tabs );
Run Code Online (Sandbox Code Playgroud)

这很好:

export default Tab = connect( mapState, mapDispatch )( Tabs );
Run Code Online (Sandbox Code Playgroud)

可以解释一下,为什么const无效export default?这是一个不必要的补充和任何宣称为export default假定的东西const吗?

javascript scope default export const

296
推荐指数
7
解决办法
11万
查看次数

React - 防止来自Child的Parent上的事件触发器

我有这种情况,当单击父元素时,它会翻转以显示具有不同颜色的子元素.不幸的是,当用户点击其中一种颜色时,也会触发父项上的"点击"事件.

如何在单击子项时停止父项上的事件触发器?

可能的解决方案我想知道:

1 - CSSpointer-events : none单击子项时将类附加到父级.但是,这意味着父母将需要在pointer-events以后清理该类.

2 - 使用Ref?记录refReact元素并在点击孩子时,将其event.target与ref 进行比较?我不喜欢这个,因为我不喜欢全球ref.

我们非常感谢思想和更好的解决方案.问题是:如何在单击子项时停止父项上的事件触发器?

javascript css events dom-events reactjs

36
推荐指数
3
解决办法
2万
查看次数

Web Workers - 如何导入模块

我正在使用ES2015导入/导出模块.

在我的工作文件中,当我尝试导入像我通常那样的函数时:

worker.js

import { a, b, c } from "./abc.js";
Run Code Online (Sandbox Code Playgroud)

我收到错误: SyntaxError: import declarations may only appear at top level of a module

当我在我的模块'abc.js'中导出函数时,我不知道如何使用旧的(显然在它的出路)语法中使用它们:

self.importScripts( "/app/abc.js" );
Run Code Online (Sandbox Code Playgroud)

所以,我的问题是,我们如何使用新的导入模块语法与工人?

第二个问题是,importScripts从某个模块导入时导入的内容是什么?没有导出全局对象父项?

javascript import module web-worker ecmascript-6

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

箭头功能中的卷曲括号

有人请解释以下内容:

我跟随丹阿布拉莫夫的讲座和做练习.

代码工作正常,但是当使用大括号编写以下特定函数时,测试失败**{ }**.

    case 'toggleTodo' :
        return (
            state.map( (one) => {
                oneTodo( one, action )
            })
        );
Run Code Online (Sandbox Code Playgroud)

相同的代码工作正常,没有花括号.

    case 'toggleTodo' :
        return (
            state.map( (one) => 
                oneTodo( one, action )
            )
        );
Run Code Online (Sandbox Code Playgroud)

这是JsBin.请参阅第31行.

javascript brackets curly-braces ecmascript-6 arrow-functions

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

React - 子组件可以将值发送回父表单

InputField&Button是进入一个表单创建一个表单自定义组件.我的问题是如何将数据重新发送到表单,以便在按钮单击时,我可以使用数据(用户名和密码)在表单上激活ajax:

export default auth.authApi(
  class SignUpViaEmail extends Component{

    constructor(props){
      super(props);
      this.state = {
        email : "",
        password : ""
      };
      this.storeEmail = this.storeEmail.bind( this );
      this.storePassword = this.storePassword.bind( this );
    }

    storeEmail(e){
      this.setState({ email : e.target.value });
    }

    storePassword(e){
      this.setState({ password : e.target.value });
    }

    handleSignUp(){
      this.props.handleSignUp(this.state);
    }

    render(){
      return(
        <div className="pageContainer">

          <form action="" method="post">
            <InputField labelClass = "label"
                        labelText = "Username"
                        inputId = "signUp_username"
                        inputType = "email"
                        inputPlaceholder = "registered email"
                        inputClass = "input" /> …
Run Code Online (Sandbox Code Playgroud)

javascript forms components input reactjs

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

CSS - 使div占用所有可用空间

所有,

我有一个页面,假设只占用浏览器中的可用屏幕空间.

我有一个"顶栏"和一个"底栏",两者都固定在页面的顶部和底部.我想要一个div来消耗(占用)上面提到的两个柱子之间的剩余空间.

在此输入图像描述

至关重要的是,中间div不会被顶部和底部条重叠.这完全可以用CSS还是我需要使用js.

另外,如果我使用js,考虑到浏览器在js代码之前首先加载CSS,上面如何使用js进行中心定位?

非常感谢,

html css css-position

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

理解CSS Lint警告

我正在为我们的网站编写CSS,我只是通过CSS Lint运行它.我正在努力理解相当多的警告,以便社区的帮助.

  1. 不要在选择器中使用ID.

    这不是ID的重点吗?用于解决页面上的特定元素?

  2. 选择器中有2个ID,真的吗?

    有没有更好的方法来选择元素而不是在同一行中使用两个选择器?

  3. 破箱模型:使用带有边框顶部的高度.

    我不知道这是什么意思.我的理解是箱子高度与边界高度是分开的.我已经为元素定义了一个高度,然后边界边被单独定义,我哪里错了?

  4. 标题(h1)不应该是合格的.

css css-selectors csslint

12
推荐指数
2
解决办法
7174
查看次数

Webpack错误 - 无法解析文件或目录

当我启动webpack-dev-server时,我收到此错误:

ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' /var/www/html/151208-DressingAphrodite/app in /var/www/html/151208-DressingAphrodite
 @ multi main
Run Code Online (Sandbox Code Playgroud)

这是我的webpack.config.js:

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require ('html-webpack-plugin');

const PATHS = {
  app: path.join (__dirname, 'app'),
  build : path.join (__dirname, 'build')
};

module.exports = {
  entry : [
    'babel-polyfill',
    'webpack-dev-server/client?http://localhost:8080',
    PATHS.app
  ],
  output : {
      publicPath : '/',
      filename : 'dressingaphrodite.js',
      hash : true
  },
  debug : true,
  devServer : {
    contentBase : './app' …
Run Code Online (Sandbox Code Playgroud)

javascript node.js webpack webpack-dev-server npm-live-server

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

CSS - 使用display:inline属性删除列表菜单中的水平空间

我是CSS的新手,并且在本月底之前设定了在CSS中学习和发布我的网站的目标.

我的问题:

我正在尝试使用悬停下拉菜单构建一个CSS水平菜单,但是,当我使用display: inline带有li(列表)项目的属性时,我会li在条形图中的(列表)项目之间获得水平空格.如何删除此空间?

这是HTML:

<div id="tabas_menu">
    <ul>
        <li id="tabBut0" class="tabBut">Overview</li>
        <li id="tabBut1" class="tabBut">Collar</li>
        <li id="tabBut2" class="tabBut">Sleeves</li>
        <li id="tabBut3" class="tabBut">Body</li>
    </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

这是CSS:

#tabas_menu {
    position: absolute;
    background: rgb(123,345,567);
    top: 110px;
    left: 200px;
}

ul#tabas_menu {
    padding: 0;
    margin: 0;
}

.tabBut {
    display: inline;
    white-space: 
    list-style: none;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,142,190,1)),to(rgba(188,22,93,1)));
    background: -moz-linear-gradient(top, rgba(255,142,190,1), rgba(188,22,93,1));
    font-family: helvetica, calibri, sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    text-shadow: 1px 1px 1px rgba(99,99,99,0.5); …
Run Code Online (Sandbox Code Playgroud)

css inline

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

简单的拖放代码

我正在努力与看似简单的JavaScript练习,写一个香草拖放.我想我的'addeventlisteners'犯了一个错误,这里是代码:

var ele = document.getElementsByClassName ("target")[0];
var stateMouseDown = false;
//ele.onmousedown = eleMouseDown;
ele.addEventListener ("onmousedown" , eleMouseDown , false);

function eleMouseDown () {
    stateMouseDown = true;
    document.addEventListener ("onmousemove" , eleMouseMove , false);
}

function eleMouseMove (ev) {
    do {
        var pX = ev.pageX;
        var pY = ev.pageY;
        ele.style.left = pX + "px";
        ele.style.top = pY + "px";
        document.addEventListener ("onmouseup" , eleMouseUp , false);
    } while (stateMouseDown === true);
}

function eleMouseUp () {
    stateMouseDown = false;
    document.removeEventListener ("onmousemove" , eleMouseMove …
Run Code Online (Sandbox Code Playgroud)

javascript drag-and-drop draggable drag

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